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标准入门》