字符串的扩展以及新增方法

字符的 Unicode 表示法

能够经过如下六种方式表示一个字符：

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
// 当码点大于 0xFFFF 的数值，须要将码点放入大括号，才能被正确识别
复制代码

而什么是 Unicode 码呢，是为了统一全部文字的编码而应运而生的，具体解释Unicode 。

字符串的遍历器接口

在以往的状况下，咱们使用 for 循环来遍历字符串或其余，可是这样的遍历方式不能识别大于 0xFFFF 的码点，新的 for ... of 循环能够作到这一点。

let text = String.fromCodePoint(0x20BB7);
for(let i of text) {
  console.log(i);	// 吉
}
复制代码

模版字符串

这个比较常常使用。

能够保存单行/多行字符串，并保留其格式，一样的也能够转义 \n 这样的换行符之类的字符格式。一样的能够经过 \ 来转义这个模版字符串符号：

`\`Yo\` World!` 
// "`Yo` World!"
复制代码

除了基础的使用${variable} 来在模版字符串中加入变量外，还能够在${} 放入任意的 JavaScript 表达式，好比运算式、引用对象属性、调用函数

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar
复制代码

同时若是花括号内的值不是字符串,将调用对象的 toString 方法

let foo = {a:{b:1},c:2}

`${foo.a}`

// "[object Object]"

let bar = {a:{b:1,toString:function(){return 2}},c:3}
`${bar.a}`

// "2"
复制代码

若是模板字符串中的变量没有声明，将报错。

阮一峰老师中的一个很奇妙的例子：

const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table> `;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
复制代码

将一个模版字符串做为函数的返回值抛出来，并在此模版字符串中使用另外一个模版字符串，引用函数的参数。此方法能够动态的根据实时数据生成动态的表格（亦或是其余的列表等之类的数据）。

标签模版

更高级的使用模版字符串的方式-标签模版。

新增方法

String.fromCodePoint()

Unicode 码相关方法： 从 Unicode 码点返回对应字符串；

String.raw()

Unicode 码相关方法：返回一个斜杠都被转义的字符串，每每用于模版字符串的处理方法^[1]

实例方法： CodePointAt()

根据一个字符，返回对应的字符码点；

实例方法： normalize()

暂未了解

实例方法： includes() startsWith() endsWith()

在es5 中咱们有 indexOf() 来查询某一个字符串在字符串中首次出现的位置：

let text = "text";

text.indexOf("es");	// 1
复制代码

如今咱们可使用 includes() 返回的 boolean 来判断要检测的字符串是否在此字符串中：

let text = "text";

text.includes("te");	// true
复制代码

经过 startsWith() 返回的boolean 判断要查询的字符串是否在另外一个字符串的头部，使用 endsWith()判断要查询的字符串是否在另外一个字符串的尾部：

let text = "text";

text.startsWith("te");	// true
text.endsWith("st");	// true

复制代码

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

复制代码

上面代码表示，使用第二个参数n时，endsWith的行为与其余两个方法有所不一样。它针对前n个字符，而其余两个方法针对从第n个位置直到字符串结束。

实例方法： repeat()

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

'frank'.repeat(3);	// 'frankfrankfrank'
'frank',repeat(0);	// ''

复制代码

若是参数是小于等于-1，或者等于 Infinity ,则报错，

在 > -1 范围内的数字若是是小数则会取整：

'x'.repeat(-0.3); // ''
'x'.repeat(NaN);	// ''
'x'.repeat(2.7);	// 'xx'

复制代码

实例方法 padStart() / padEnd()

ES 2017 引入字符串补全长度的功能：

'x'.padStart(3,'a');	// 'aax'
'x'.padStart(3,'abc');	// 'abx'
'x'.padEnd(3,'b');	// 'xbb'
'x'.padEnd(3,'bcd');	// 'xbc'


复制代码

实例方法：trimStart() / trimEnd()

ES2019 对字符串新增了 trimStart() & trimEnd() 这两种方法。

let a = ' abc ';

a.trim();	// "abc"
a.trimStart();	// "abc "
a.trimEnd();	// " abc"

复制代码

去除字符串中头尾的 空格 / tab / 换行 等不可见的空白字符。

---

1. from 阮一峰老师 - es6入门 ↩︎