ES6学习笔记(二)——字符串扩展
相信很多人也和我一样，不喜欢这样循规蹈矩的逐条去学习语法，很枯燥乏味。主要是这样学完一遍之后，没过一段时间就忘到九霄云外了。不如实际用到的时候研究它记得牢靠，所以我就整理成笔记，加深记忆的同时便于复习查看。
在这样不断的学习过程中，也提高了自己的总结能力：)
1.字符串的遍历器接口
ES5，数组和对象可以进行遍历，使用for() 和 for...in,还有jq中的each()方法进行遍历。
ES6为我们提供了字符串遍历器 for...of 循环遍历
优点：可以识别大于0xFFFF的码点，传统的for循环是无法识别的。
for(let i of 'hello'){ console.log(i); //依次输出‘h’ 、‘e’、‘l’、‘l’、‘o’ }
2.at()方法
ES5中字符串有charAt()方法，返回字符串给定位置的字符，该方法不能识别码点大于0xFFFF的字符。
'lemon'.charAt(0); //'l' '𠮷'.charAt(0) // "\uD842"
字符串实例的at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符。
'lemon'.at(0); //'l' '𠮷'.at(0) // "𠮷"
3.includes()、startsWith()、endsWith()
ES5，有indexOf()方法，确定某个字符串是否包含在另外一个字符串中。
ES6，又提供三种新的方法：
- includes(str,[place])：返回布尔值，表示是否找到了参数字符串。
- startsWith(str,[place])：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith(str,[place])：返回布尔值，表示参数字符串是否在源字符串的尾部。
这三个方法都支持第二个参数，表示开始搜索的位置。
注意：使用第二个参数n 时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
var s1 = 'Hello world!'; s1.startsWith('Hello') // true s1.endsWith('!') // true s1.includes('o') // true //------------------------------- var s2 = 'happy day!'; console.log(s2.startsWith('day', 6)); // true，表示从第0个字符开始 console.log(s2.includes('day', 6)); // true，表示从第0个字符开始 console.log(s2.endsWith('happy', 5)); // true,表示前5个字符 console.log(s2.includes('happy', 0)); // true，表示从第0个字符开始
4.repeat()方法
该方法返回一个新字符串，表示将原字符串重复n次。
根据其参数类型分为以下几种：
（1）参数是正整数；
（2）参数是小数，会被取整；
（3）参数是负数或Infinity会报错，如果参数是0到-1之间的小数，则等同于0；
（4）参数是NAN 等同于0;
（5）参数是字符串，则会先转换成数字；
//1.参数是正整数 console.log('hello'.repeat(2)) // "hellohello" console.log('na'.repeat(0)) // "" //2.参数是小数 console.log('na'.repeat(2.9)) // "nana" //3. 参数是Inifinity console.log('na'.repeat(Infinity)) //4. 参数是负数 // RangeError console.log('na'.repeat(-1)) // RangeError //5. 参数是0~-1之间的小数 console.log('na'.repeat(-0.9)) // "" //6. 参数是NAN console.log('na'.repeat(NaN)) // "" //7. 参数是字符串 console.log('na'.repeat('na')) // "" console.log('na'.repeat('3')) // "nanana"
5.padStart()、padEnd()字符串补全长度方法
padStart()用于头部补全，padEnd()用于尾部补全。
padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
这里我们也根据其参数分为以下几种类型：
（1）若原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
（2）若用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
（3）如果省略第二个参数，默认使用空格补全长度。
//1.正常情况 console.log('x'.padStart(4, 'ab') )// 'abax' console.log('x'.padEnd(5, 'ab')) // 'xabab' // 2.原字符串的长度，等于或大于指定的最小长度 console.log('xxx'.padStart(2, 'ab')) // 'xxx' console.log('xxx'.padEnd(2, 'ab')) // 'xxx' // 3.补全的字符串与原字符串，两者的长度之和超过了指定的最小长度 console.log('abc'.padStart(10, '0123456789'))// '0123456abc' // 4.省略第二个参数 console.log('x'.padStart(4)) // ' x' console.log('x'.padEnd(4)) // 'x '
padStart的常见用途：
（1）为数值补全指定位数。下面代码生成10位的数值字符串。
（2）提示字符串格式。
//为数值补全指定位数 '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"
6.模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。
它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如下：
var string = `\`Hello\` World!`; console.log(string);//`Hello` World!
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。若不想要这个换行，可以使用trim方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
模板字符串中嵌入变量，需要将变量名写在${}之中。
大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
var x = 1, y = 2,obj = {x: 1, y: 2}; console.log(`${x} + ${y} = ${x + y}`);// "1 + 2 = 3" console.log(`${x} + ${y * 2} = ${x + y * 2}`);// "1 + 4 = 5" console.log(`${obj.x + obj.y}`);// 3
模板字符串之中还能调用函数。如下：
function fn() { return "Hello World"; } `foo ${fn()} bar`// foo Hello World bar
模板字符串甚至还能嵌套。
7.标签模板
8.String.raw()方法
ES6还为原生的String对象，提供了一个raw方法。
用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。
如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。
String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。
String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'
// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
9.模板字符串的限制
标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，导致无法嵌入其他语言。
注：此笔记对ES6字符串扩展记录的不完整，这里我只记了一部分新增特性。深入学习戳☞http://es6.ruanyifeng.com/#docs/string
