es6 string includes_ES6 新增的字符串方法以及模板字符串功能【09】-CSDN博客

学习要点：1.新增方法 2.模板字符串

本节课我们来开始学习 ES6 新增的字符串方法以及模板字符串功能。

一．新增方法

1. 对于一些超过两个字符(四字节)的异体字，ES6 新增了 codePointAt()方法；

//两个字符的异体字let text='?';console.log(text.length); //2console.log(text.charAt(0)); //�console.log(text.charCodeAt(0)); //55362console.log(text.charCodeAt(1)); //57271console.log(text.codePointAt(0)); //134071 十进制console.log(String.fromCharCode(134071)); //ஷconsole.log("-------------------");//一个字符的简体字let str='吉';console.log(str.length); //1console.log(str.charAt(0)); //?console.log(str.charCodeAt(0)); //21513console.log(str.charCodeAt(1)); //NaNconsole.log(str.codePointAt(0)); //21513console.log(String.fromCharCode(21513)); //吉

2. 对于超过两字符的码点，可以通过 ES6 新增的 String.fromCodePoint()得到；

//下面可以得到：上面为土，下面为口的异体字console.log(String.fromCodePoint(134071)); //?

3. ES6 提供 normalize()方法用于有音标的符号组合形式进行统一；

console.log('\u01D1'); //Ǒconsole.log('\u004F'); //Oconsole.log('\u030C'); //̌console.log('\u004F\u030C'); //Ǒconsole.log('\u004F\u030C'=='\u01D1'); //falseconsole.log('\u004F\u030C'.normalize()=='\u01D1'.normalize()); //true

4. ES6 提供了三种判断字符串的方法：includes()、startsWith()和 endsWith()；

let str='hello Mr.ren!';console.log(str.includes('Mr.')); //true，是否找到'Mr.'console.log(str.startsWith('ell')); //false，必须从开头找console.log(str.endsWith('n!')); //true，必须从结尾找console.log(str.includes('Mr',9)); ///false，超过位置，第二参数寻找的位置

5. repeat()重复字符串，padStart()补全字符串头部，padEnd()补全字符串尾部；

console.log('x'.repeat(5)); //xxxxxconsole.log('xyz'.repeat(3)); //xyzxyzxyzconsole.log('Mr.ren'.repeat(0)); //空console.log('ren'.padStart(5,'Mr')); //Mrrenconsole.log('ren'.padEnd(5,'Mr')); //renMr

二．模板字符串

1. 在 ES6 之前，字符串内夹杂变量，我们总是通过分离和+号连接解决；

let name='Mr.ren',age=100,info='我是'+name+',今年'+age+'岁。';console.log(info); //我是Mr.ren,今年100岁。

2. 现在可以直接使用(`)反引号配合${var}模版语法格式，直接实现变量解析功能；

let name='Mr.ren',age=100,info=`我是${name},今年${age}岁。`;console.log(info); //我是Mr.ren,今年100岁。

let name='Mr.ren',age=100,info=`    我是${name},    今年${age}岁。`;console.log(info); //我是Mr.ren,\n今年100岁。

3. 如果我们想在字符串中插入表达式，也可以使用${a + b}模版语法；

let text=`一加一等于${1+1}`;console.log(text); //一加一等于2

4. ${${}}这种模版嵌套的方式，也是支持的；

let flag = true;let text=`结果:${flag ? `${1+1}` : 'false'}`;console.log(text); //结果：2

5. 可以使用 String.raw 来得到原生字符串；

let str=`我\n是`;console.log(str); //解析了\nlet text = String.raw `我\n是`;console.log(text); //我\n是

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！