学习要点: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'); //Ǒ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教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术,陪有梦想的人一起成长!