三.字符串的扩展

字符串的遍历器接口

es6为字符串添加了遍历器接口，使得字符串可以被 for...of循环遍历。

for(let codePoint of 'foo'){
    console.log(codePoint);
}

includes(), startsWith(), endWith()

• includes():返回布尔值，表示是否找到参数字符串
• startsWith():返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith():返回布尔值，表示参数字符串是否在原字符串的尾部

var s="Hello world!";
s.startsWith('Hello')//true
s.endWith('!')//true
s.includes('o')//true

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

var 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次。

'x'.repeat(3)//"xxx"
'hello'.repeat(2)// "hellohello"
'na'.repeat(0)// ""

padStart(), padEnd()

padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5,'ab') //'ababx'
'x'.padStart(4,'ab')//'abax'

'x'.padEnd(5,'ab') // 'xabab'
'x'.padEnd(4,'ab')//'xaba'

上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

模板字符串

传统的模板

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

es6模板字符串

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

如果用模板字符串，所有的缩进都保留在输出中，要想消除，须使用trim方法。

//ul标签前面会有一个换行
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);