學習筆記: JS字符串

咱們在js中操做字符串，每每是將它轉換爲數組，再操做，如：

split('').reverse().join('')

字符串的反轉

MDN

js字符串經常使用的一些方法

判斷一個字符串是否以某個字符串開頭

• str.indexOf(substr[, start]) => 返回 substr 在字符串 str 中首次出現的位置,從 start 位置開始查找，若是不存在，則返回 -1。

start能夠是任意整數，默認值爲 0。若是 start < 0 則查找整個字符串（如同傳進了 0）。若是 start >= str.length，則該方法返回 -1，除非被查找的字符串是一個空字符串，此時返回 str.length

var str = 'JavaScript';
    str.indexOf('av');   // 1
    str.indexOf('av',2); // -1
    str.indexOf('',11);  // 10
    str.indexOf('',8);   // 8

• str.includes(substr[, start]) => ES6方法判斷 substr 是否被包含在 str 中，若是是返回true，不然返回false

  var str = 'To be, or not to be, that is the question.';

  str.includes('To be');     // true
   str.includes('To be', 1);  // false
   str.includes('TO BE');     // false

• str.startsWith(substr[, start]) => ES6方法判斷 str 是不是以 substr 「開頭」的，若是是返回true，不然返回false

var str = "To be, or not to be, that is the question.";

str.startsWith("To be");         // true
str.startsWith("not to be");     // false
str.startsWith("not to be", 10); // true

toSting 和 valueOf

全部對象繼承了這兩個轉換方法
toString: 返回一個反映這個對象的字符串
valueOf: 返回它相應的原始值

• toString

var arr = [1,2,3]
var obj = {
    a: 1,
    b: 2
}
console.log(arr.toString()) // => 1,2,3
console.log(obj.toString()) // => [object Object]
// 那咱們修改一下它原型上的 toString 方法呢
Array.prototype.toString = function(){ return 123 }
Object.prototype.toString = function(){ return 456 }
console.log(arr.toString()) // => 123
console.log(obj.toString()) // => 456

// 咱們看下其他類型轉換出來的結果， 基本都是轉換成了字符串
console.log((new Date).toString()) // => Mon Feb 05 2018 17:45:47 GMT+0800 (中國標準時間)
console.log(/\d+/g.toString()) // => "/\d+/g"
console.log((new RegExp('asdad', 'ig')).toString()) // => "/asdad/gi"
console.log(true.toString()) // => "true"
console.log(false.toString()) // => "false"
console.log(function(){console.log(1)}.toString()) // => "function (){console.log(1)}"
console.log(Math.random().toString()) // => "0.2609205380591437"

• valueOf

var arr = [1,2,3]
var obj = {
    a: 1,
    b: 2
}
console.log(arr.valueOf()) // => [1, 2, 3]
console.log(obj.valueOf()) // => {a: 1, b: 2}
// 證實valueOf返回的是自身的原始值
// 一樣咱們修改下 valueOf 方法

Array.prototype.valueOf = function(){ return 123 }
Object.prototype.valueOf = function(){ return 456 }
console.log(arr.valueOf()) // => 123
console.log(obj.valueOf()) // => 456

// valueOf轉化出來的基本都是原始值，複雜數據類型Object返回都是自己，除了Date 返回的是時間戳
console.log((new Date).valueOf()) // => 1517824550394  //返回的並非字符串的世界時間了，而是時間戳
console.log(/\d+/g.valueOf()) // => 456  當咱們不設置時valueOf時，正常返回的正則表式自己：/\d+/g，只是咱們設置了 Object.prototype.valueOf 因此返回的時：456
console.log(Math.valueOf()) // => 456 同上
console.log(function(){console.log(1)}.valueOf()) // => 456 同上

toString 和 valueOf 實例

1.

var a = {
    toString: function() {
        console.log('你調用了a的toString函數')
        return 8
    }
}
console.log( ++a) 
// 你調用了a的toString函數 
// 9  
// 當你設置了 toString 方法， 沒有設置 valueOf 方法時，會調用toString方法，無視valueOf方法

2.

var a = {
    num: 10,
    toString: function() {
        console.log('你調用了a的toString函數')
        return 8
    },
    valueOf: function() {
        console.log('你調用了a的valueOf函數')
        return this.num
    }
}
console.log( ++a) 
// 你調用了a的valueOf函數
// 11
// 而當你二者都設置了的時候，會優先取valueOf方法， 不會執行toString方法

字符串模板

es5中

引入lodash庫的_.template()

// Use the "interpolate" delimiter to create a compiled template.
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

es6

駝峯化一個連字符鏈接的字符串

/**
 * Camelize a hyphen-delimited string.//駝峯化一個連字符鏈接的字符串
 */
var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
  return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ‘‘; })
});

/**
 * Capitalize a string.//對一個字符串首字母大寫
 */
var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)//把第一個字符串的首個字符大寫，把除第一個字符的字符串返回與大寫的首字符拼接
});

/**
 * Hyphenate a camelCase string.用字符號鏈接一個駝峯的字符串
 */
var hyphenateRE = /([^-])([A-Z])/g;
var hyphenate = cached(function (str) {
  return str
    .replace(hyphenateRE, ‘$1-$2‘)//$1爲正則表達式匹配的第一個元素$2爲第二個元素
    .replace(hyphenateRE, ‘$1-$2‘)
    .toLowerCase()//使之最小化
});

/**
 * Check if a string starts with $ or _
 */
function isReserved (str) {
  var c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5f
}

string to array

repeat

判斷字符串是否以 $ 或 _ 開頭

參考

《JavaScript經典實例》
js 基礎總結（經常使用的反轉）
vue源碼解析