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

471 阅读4分钟

字符的 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入门 ↩︎