相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味。主要是这样学完一遍之后,没过一段时间就忘到九霄云外了。不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看。
在这样不断的学习过程中,也提高了自己的总结能力:)
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