ES6中字符串的扩展

includes(),startsWith(),endsWith()

传统上，JavaScript只提供了indexOf方法用来确定一个字符串中是否包含另一个字符串。ES6又提供了3种新方法。

includes：返回布尔值，表示是否找到参数字符串；
startsWith：返回布尔值，表示参数字符串是否在源字符串的头部；
endsWith：返回布尔值，表示参数字符串是否在源字符串的尾部；

const s = 'hello world';
s.startsWith('hello') // true
s.endsWith('world') // true
s.includes('o') // true

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

const s = 'hello world';
s.startsWith('world', 6) // true
s.endsWith('hello',5) // true
s.includes('hello',6) // false

上面的代码表示，endsWith第二个参数的意义与其他两个不同，endsWith第二个参数的意义是针对前n个字符串，其他两个则针对从第n个位置到字符串结尾之间的字符串。

repeat()

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

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

参数若为小数，会被取整。若为负数或者Infinity会报错（0到-1之间的小数比较特殊，会被取整为-0运算，repeat视为0）。若为NAN等同于0。若参数为字符串会先转换成数字

'na'.repeat(2.9) // nana
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1)  // RangeError
'na'.repeat(-0.9) // ''
'na'.repeat(NAN) // ''
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'

padStart(),padEnd()

ES2017引入了字符串不全长度的功能，如果某个字符串不够指定长度，会在头部或尾部自动补全。（我个人真的是太心水这俩功能了！）

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

上面的代码中，这俩方法分别接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数则是用来补全的字符串。

如果原字符串的长度大于或等于第一个参数，则返回原字符串。
如果用来补全的字符串与原字符串之和大于指定的最小长度，则截去超出的补全字符串。
若省略第二个参数，则会用空格来补全

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'abc'.padStart(10, '123456789') // '1234567abc'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart的最常见用途是为了数值补全指定位数，下面代码将生成10位数值得字符串。

'1'.padStart(10, '0') // '0000000001'
'12'.padStart(10, '0') // '0000000012'
'123456'.padStart(10, '0') // '0000123456'

另一个用途是提示字符串格式

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模板字符串

传统的JavaScript输出模板通常这样写：

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

这种写法真是繁琐又不方便，ES6引入了模板字符串来解决这个问题

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

一下清爽了很多。模板字符串是增强版的字符串，用反引号（`）标识。它可以作为普通字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量。但请注意，若使用模板字符串表示多行字符串，所有空格与缩进都会被保留在输出中，若不想要这些，可以使用trim方法消除

$('#list').html(
`
<ul>
    <li>first</li>
    <li>second</li>
</ul>
`
).trim()

在模板字符串中嵌入变量，只需要将变量名写在${}中即可，并且大括号内可以放任意的JavaScript表达式，也可以进行运算，以及引用对象属性，甚至可以调用函数

const x = 1;
const y = 2;
const z = `${x} + ${y} = ${x + y}` // 1 + 2 = 3

const obj = {x: 1, y: 2 }
`${obj.x} + ${obj.y} = ${obj.x} + ${obj.y}` // 1 + 2 = 3

function fn() {
    return 'hello world'
};
`foo ${fn()} bar` // foo hello world bar

如果大括号内的值不是字符串，则按一般规则转换为字符串。

模板字符串还可以嵌套使用哦

const demo = `
${[1,2,3,4].map(item => {
    return `${item}test`
}).join(';')}
`
// 1test;2test;3test;4test

如果需要引用模板字符串本身，可以像这样写：

// 方法一
let str = 'return ' + '`hello ${name}!`';
let func = new Function('name', str);
func('Jack') // 'hello Jack'
// 方法二
let str = '(name) => `hello ${name}`';
let func = eval.call(null, str);
func('Jack')  // 'hello Jack'

总结

本文简单介绍了ES6中字符串的一些扩展方法，在日常开发中简直不要太好使，everybody都用起来哦！
文中内容多摘自阮一峰老师的《ES6标准入门》