ES6 -- String 扩展方法解析

Unicode支持

Javascript允许采用\uxxxx的形式表示一个字符，但是这种表示仅限于/u0000 ~ /uFFFF之间。ES做出了改进，只要将码点放入大括号纠正正确解读

例子：

// ES5
console.log('\u0071'); // q
// ES6
console.log('\u{71}'); // q
复制代码

来个复杂一点的例子，ES6也能解读出来

let jquery = 'JQuery';
// ES5
console.log(jquery); // JQuery
// ES6
console.log(j\u{71}uery); // JQuery
复制代码

上面的两个都能正常输入Jquery。

codePointAt() 方法

codePointAt()方法是返回char数组的给定索引上的十进制代码点（代码点是指可用于编码字符集的数字），接受一个参数，参数是字符串中的位置（从0开始）。

例子：

let name = '端coder';
console.log(name.codePointAt(0)); // 31471
console.log(name.codePointAt(0).toString(16)); //7aef
console.log('\u7aef'); // 端
复制代码

codePointAt方法在第一个字符上争取的识别了‘端’，并返回了它的十进制代码点31471。将他转换成16进制（用toString(16)方法转）后，反编译为汉字正确显示为‘端’。

codePointAt()方法能够正确判断一个字符是由两个字节还是4个字节组成。这也是弥补了charCodeAt和charAt的不足。

例子：

let temA = 't';
console.log(temA.codePointAt(0) > 0xFFFF); // false
        
let temB = '?';
console.log(temB.codePointAt(0) > 0xFFFF); // true
复制代码

在写上面例子的时候发现下面的这个例子，即使是汉字也是输出false。

例子：

let temA = 't';
console.log(temA.codePointAt(0) > 0xFFFF); // false
        
let temB = '端';
console.log(temB.codePointAt(0) > 0xFFFF); // false
复制代码

这是什么原因？我查了下原来汉字Unicode也分不同类型，例如上面的“?”属于扩展B，而“端”属于基本汉字。

下面附上Unicode中文表示范围，以供参考：

字符集	汉字	unicode编码
基本汉字	20902字	4E00-9FA5
基本汉字补充	38字	9FA6-9FCB
扩展A	6582字	3400-4DB5
扩展B	42711字	20000-2A6D6
扩展C	4149字	2A700-2B734
扩展D	222字	2B740-2B81D
康熙部首	214字	2F00-2FD5
部首扩展	115字	2E80-2EF3
兼容汉字	477字	F900-FAD9

fromCodePoint() 方法

fromCodePoint属于String对象的方法可以识别大于0xFFFF的字符，弥补了ES5fromCharCode的不足，在作用上又正好与codepointAt相反。

例子：

var temA = String.fromCodePoint(0x20164);
console.log(temA); // ?
var temB = String.fromCodePoint(0x20164, 0x7aef);
console.log(temB); // ?端
复制代码

如果String.fromCodePoint方法有多个参数，则会返回一个合并的字符串。

字符串的遍历器接口

ES6为字符串添加了遍历器接口（Iterator),使得字符串可以被for...of循环遍历。

例子：

let text = '我是王小端coder';
for (let char of text){
    console.log(char);
}
// 上面等同与下面
for (let i = 0;i < text.length; i++){
    console.log(text[i]);
}
// 上面两个等同于下面
for (let i in text){
    console.log(text[i]);
}
复制代码

includes() 方法

includes方法返回布尔值，是否找到了参数字符串。

例子：

let text = '我是王小端coder';
console.log(text.includes('端c')); // true
console.log(text.includes('端d')); // false
复制代码

startsWith() 方法

startsWith方法返回布尔值，参数字符串是否在原字符串的头部。

例子：

let text = '我是王小端coder';
console.log(text.startsWith('我是')); // true
console.log(text.startsWith('小端')); // false
复制代码

endsWith() 方法

endsWith方法返回布尔值，参数字符串是否在原字符串的尾部。

例子：

let text = '我是王小端coder';
console.log(text.endsWith('coder')); // true
console.log(text.endsWith('小端')); // false
复制代码

repeat() 方法

repeat方法返回一个新字符串，表示将原字符串重复n次。

例子：

console.log('coder'.repeat(2)); // codercoder
console.log('端'.repeat('3')); // 端端端
复制代码

如果repeat的参数是负数或者Infinity，会报错，如果是字符串，会先转换成数字，如果遇到不是数字的字符则默认输入""。

raw() 方法

ES6 为String对象提供了一个raw方法，该方法用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。如果原字符串的斜杠已经转义，那么String.raw会进行再次转义。

例子：

console.log(String.raw`王小端\ncoder`); // 王小端\ncoder
console.log(String.raw`王小端\\ncoder`); // 王小端\\ncoder
复制代码

raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

例子：

String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
// 上面例子等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
复制代码

作为函数，String.raw的代码实现基本如下：

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}
复制代码

对于字符串模板由于内容较多，平时也常用，我们下次单独写一篇，我这里不做讲解。

转载于:https://juejin.im/post/5ca306bbf265da30b53ec4d5