当前位置: 首页 > Web前端 > HTML5

《深入理解ES6》笔记-字符串与正则表达式(二)

时间:2023-04-04 23:01:54 HTML5

本章内容与第一章变量的声明相比,有所进步,但并不难理解。本章主要讲两个知识点,字符串和正则表达式字符串(String)是JavaScript6最大的原始数据类型。其他的是Boolean、Null、Undefined、Number、Symbol(es6中新增)。字符串类型是前端开发中使用频率最高的类型之一,网站上可见的各种文案几乎都是字符串类型的数据。我们经常需要用到的操作无外乎这几点:读取字符串、转换字符串、清空字符串、拼接字符串、截取字符串。在ES5中,字符串类型已经具备了非常丰富的应用能力。那么,在ES6中,ECMA专家对字符串做了哪些更新呢?Unicode引入扩展字符集时,16位的字符不足以满足字符串的发展,所以在ES6中更新了Unicode的支持。再来看看ES6字符串的UTF-16编码点新方法:ES6强制使用UTF-16字符串编码。UTF-16的解释请自行百度了解。codePointAt():该方法支持UTF-16,接受代码单元的位置而不是字符串位置作为参数,返回字符串中给定位置对应的代码点,即整数值。String.fromCodePoiont():功能与codePointAt相反,获取字符串中某个字符的码位,也可以根据指定的码位生成一个字符。normalize():提供Unicode的标准形式,接受一个可选的字符串参数,表示应该应用某种Unicode标准形式。RegularExpressionRegularExpressionu修饰符:正则表达式中加上u字符时,从代码单元运行方式切换到字符方式。其他新方法上面提到的字符串和正则化的新方法,只有在国际化的时候才会用到。我觉得国内很多网站还是不需要考虑国际化的问题。不懂就先扔掉。.下面提到的新增方法是实际开发中经常需要用到的方法。字符串中的子串识别:以前我们经常使用indexOf()来检测一个字符串是否包含另一个字符串。lett='abcdefg'if(t.indexOf('cde')>-1){console.log(2)}//输出2,因为t字符串包含cde字符串。在ES6中,添加了3个新方法。每个方法接收2个参数,待检测的子串和开始匹配的索引位置。includes(str,index):如果在字符串中检测到指定文本则返回真,否则返回假。lett='abcdefg'if(t.includes('cde')){console.log(2)}//truestartsWith(str,index):如果在字符串开头检测到指定文本,则返回true,否则返回假。lett='abcdefg'if(t.startsWith('ab')){console.log(2)}//trueendsWith(str,index):如果在字符串末尾检测到指定文本,则返回true,否则返回假。lett='abcdefg'if(t.endsWith('fg')){console.log(2)}//true如果只是需要匹配字符串中是否包含某个子串,建议使用新方法,如果需要查找匹配字符串的位置,使用indexOf()。repeat(number)方法非常有趣。它接收一个Number类型的数据,并返回一个重复N次的新字符串。即使字符串是空字符,也可以返回一个包含N个空字符的新字符串。console.log('ba'.repeat(3))//bababa正则表达式的其他更新正则表达式y修饰符,正则表达式副本,flags属性...因为这块知识没用过,不打算研究实际使用。模板文字以前,我们使用单引号或双引号来表示字符串。leta='123'//单引号letb="123"//双引号现在,使用模板文字反引号``。在实际开发中,这是一个经常使用的方法。letc=`123`//Backticks要在字符串中使用反引号,只需添加一个转义字符。letd=`12\`3`//在字符串中插入反引号的方法。多行字符串中的有用价值:模板文字提供了一种非常好的机制来解决一系列多行字符串问题。如果您不使用模板文字并实现多行字符串,则可以使用换行符。leta='123\n456'console.log(a)//123//456使用模板字面量,可以很简单的实现需求。leta=`123456`console.log(a)//123//456在模板字面量中插入变量的方法。我们不再需要使用+(加号)向字符串中插入变量,而是使用${params}直接插入到需要添加到字符串的地方。lett='haha'leta=`123${t}456`console.log(a)//123haha456这个方法也叫字符串占位符。占位符支持模板字面量相互嵌套,功能强大。有了它,我们终于可以摒弃+拼接字符串这种恶心的做法了。templateliteral标签的最终用法是一个方法,你可以任意命名方法名,这种写法称为标签模板。functiontag(literals,...substitutions){//literals是一个数组,第一个位置是"",第二个位置是占位符之间的字符串,在这种情况下哈哈//substitutions是字符中的模板字面量string,可能有多个//函数最后返回的是string}leta=4lett=tag`${a}haha??`console.log(t)//4haha??总结本章讲的是新增的内容ES6的Unicode方式,但是对于不需要做国际化处理的同学,这个功能不会用到。字符串匹配的三个新方法和模板字面量的使用需要注意。这两个知识点非常非常常见!=>返回文章目录