《深入理解ES6》阅读笔记 --- 正则表达式和字符串

《深入理解ES6》阅读笔记 --- 正则表达式和字符串

说起来正则表达式可能是我用到的最少的“东西”,大部分常见的正则,在网路上都有固定的“表达式”可用,不过,了解一下对于你来说,也是有进步的。传统的正则表达式,可能要讲的东西有很多,那么,我找了一点“二手知识”,希望你可以阅读了解一下,在JavaScript环境中的正则表达式。

正则表达式教程——实践篇

正则表达式教程——语法篇

ES6开始支持Unicode

在ES6中正则表达式提供了几个新的修饰符,修复了RegExp的某个错误,以及flags。可以说,这是在ES6更新最少的之一。为了支持Unicode正则表达式提供了一个/u修饰符,那么它可以解决什么场景呢?就是让你写的正则匹配的时候不用编码而是字符,因为如果用编码,很可能有些是无法匹配上的。

无独有偶,你有时间可以看看如下列表

  1. /y修饰符
  2. /u修饰符
  3. 将正则表达式当参数传给RegExp,第二个参数不可用的错误
  4. flags属性

说到字符串我想ES6提供了最好的便利是“模板语法”,这一特性让我们深受鼓舞,想着终于不是那么搓的来拼接变量了。当然,这一版本的JS在字符串上也提供了很多起他的方法,比起它来倒是要黯然神伤的多。比如我们几乎很少用到的codePointAt,fromCodePoint,normalize,像这几个一般在国际化的产品中会有的比较多,一般正常情况下几乎很少会接触到。

以前我们使用 indexOf > -1 来判断一个字符是否在这个字符串中,现在好了ES6提供了三个方法它们都会返回一个布尔值来告诉你是否存在:includes,startsWith,endsWith。从字面上几乎可以理解第一个方法在字符串中检查指定的文本,有返回true,没有返回false。第二个和第三个方法只是在你检查的方向上有所区别,从首部开始还是从尾部开始而已。当然,如果你还是想要文本的位置,那么你可以继续使用indexOflastIndexOf。哦,对了字符串还提供了一个repeat方法,用于返回一个将当前字符串重复几次之后的字符串,看起来,这玩意有些鸡肋,但是你要是开发编辑器之类的应用,它倒是非常有用。

说说“模板语法”吧。

const name = 'icepy'
const message = `${name} call u`
console.log(message)

如果在以前我们想完成谁call你这样的动态消息,都需要如此:

var name = 'icepy'
var message = name + 'call u'
console.log(message)

粗看起来也没有什么不好,但是如果这个消息会很长很长,那么就要用+来拼接几行了。那时候看起来,就比较搓了。如果有模板语法之后,我们会怎样?

const name = 'icepy'
const phone = '186xxxxxx'
const message = `
${name} call u
Phone Number: ${phone}
`

会不会舒服很多?当然这个特性带给你的不仅仅是这些,很重要的一点是${}完全可以支持“运算”式的表达式,你可以在${}来运算一些结果。看到这里,是不是感觉到和一些模板库很像?幸运的是,从今之后再也不用引入一些基础模板库了。

在模板语法中我可能用的比较多的就是tag,有时候我会比较偷懒,将字符串的转换写成函数,然后不同类型的转换,直接用tag就好,比如:

function message(literals,...subs){
  // do 
}
const name = 'icepy'
const phone = '186xxxxx'
const mg = message `${name} call u, Phone Number: ${phone}`

也许,从这个小例子里并不能看出来什么,你可以想象一下,如果你想自己控制结果的输出,在message函数中,你可以转换成任意的结果,完全取决于你写的这个message函数。比如在消息中,文本,会员,等级,之类的,你都可以偷懒在这个message函数中完成,结合某些判断来给出你想要的结果。

这一小节给我们带来一个很有趣的“模板语法”以及字符串,正则的更新,推荐以后少用拼接多用“模板语法”,如果只是想知道指定的文本存在不存在,少用indexOf,多用新的三个方法。

编辑于 2018-08-12

文章被以下专栏收录