《深入理解ES6》——字符串和正则表达式

﹏ヽ暗。殇╰゛Y 2022-05-10 06:22 207阅读 0赞

## 字符串中的子串识别 ##

子javascript首次被使用以来，开发者们就开始使用indexOf()方法来在一段字符串中检测另一段字符串，在ES6中，提供以下三种类似的方法可以达到相同效果：

*  includes()方法，如果在字符串中检测到指定文本则返回true，否则返回false
 *  startsWith()方法，如果在字符串中的起始部分检测到指定文本则返回true，否则返回false
 *  endsWith()方法，如果在字符串的结束部分检测到指定文本则返回true，否则返回false。

以上的3个方法都可以接受两个参数：第一个参数指定要搜索的文本；第二个参数是可选的，指定一个开始搜索的位置的索引值。如果指定了第二个参数，则includes()方法和startsWith()方法会从这个索引值的位置开始匹配，endsWith()方法则从这个索引值减去欲搜索文本长度的位置开始正向匹配，对字符进行逐个比较；如果不指定第二个参数，includes()方法和startsWith()方法会从字符串起始处开始匹配，endsWith()方法从字符串末尾处开始匹配。如下：

let msg = "Hello world!";
    console.log(msg.startsWith("Hello"));//true
    console.log(msg.endsWith("!"));//true
    console.log(msg.includes("o"));//true
    console.log(msg.startsWith("o"));//flase
    console.log(msg.endsWith("world!"));//true
    console.log(msg.includes("x"));//false
    
    console.log(msg.startsWith("o",4));//true
    console.log(msg.endsWith("o",8));//true
    console.log(msg.includes("o",8));//false

## repeat()方法 ##

ES6还为字符串增添了一个repeat()方法，其接受一个number类型的参数，表示该字符串的重复次数，返回值是当前字符串重复一定次数后的新字符串。如下：

console.log("x".repeat(3));//"xxx"
    console.log("hello".repeat(2));//"hellohello"
    console.log("abc".repeat(4));//"abcabcabcabc"

## 正则表达式的复制 ##

在ES5中，可以通过个RegExp构造函数传递正则表达式作为参数来复制这个正则表达式，如下：

var re1 = /ab/i;
        re2 = new RegExp(re1);

此处的变量re2只是变量re1的一份拷贝，但如果给RegExp构造函数提供第二个参数，为正则表达式指定一个修饰符，则代码无法运行，如下：

var re1 = /ab/i; 
        //在ES5中抛出错误，在ES6中正常运行
        re2 = new RegExp(re1,"g");

如果在ES5中执行这段代码会抛出一个错误：当第一个参数为正则表达式时不可以使用第二个参数。ES6中修改了这个行为，即使第一个参数为正则表达式，也可以通过第二个参数修改其修饰符。如下：

var re1 = /ab/i; 
        //在ES5中抛出错误，在ES6中正常运行
        re2 = new RegExp(re1,"g");
    console.log(re1.toString());//"/ab/i"
    console.log(re2.toString());//"/ab/g"
    console.log(re1.test("ab"));//true
    console.log(re2.test("ab"));//true
    console.log(re1.test("AB"));//true
    console.log(re2.test("AB"));//false

在这段代码中，变量re1使用了i修饰符，为该正则表达式添加大小写无关的特性，当使用RegExp构造函数将其复制为新变量re2时，使用g修饰符代替i修饰符。如果不传入第二个参数，则re2与re1使用相同的修饰符。

## flags属性 ##

为了配合新加入的修饰符，ES6还新增了一个与之相关的新属性。在ES5中，你可能通过source属性获取正则表达式的文本，但如果要获取使用的修饰符，就需要使用如下代码格式化toString()方法输出的文本：

function getFlags(re){
        var text = re.toString();
        return text.subString(text.lastIndexOf("/")+1,text.length);
    }
    
    //toString()的返回值为"/ab/g"
    var re = /ab/g;
    console.log(getFlags(re));//"g"

这段代码会将正则表达式转换成字符串并识别最后一个/后面的字符，以此来确定使用了哪些修饰符。

为了使获取修饰符的过程更加简单，ES6新增了一个flags属性，它与source属性都是只读的原型属性访问器。如下：

let re = /ab/g;
    console.log(re.resource);//"ab"
    console.log(re.flags);//"g"

## 模板字面量 ##

模板字面量最简单的用法，看起来好像只是用反撇号（·）替换了单、双引号。如下：

let message = `Hello world!`;
    console.log(message);//"Hello world"
    console.log(typeof message);//"string"
    console.log(message.length);//12

使用模板字面量创建的字符串与普通的字符串并无差异，在模板字面量中，不需要转义单、双引号。

## 多行字符串 ##

ES6的模板字面量的语法简单，极大的简化了多行字符串的创建过程，只需在代码中直接换行就可实现，如下：

let message = `Multiline
    string`;
    console.log(message);//"Multiline
                         //string"
    console.log(message.length);//16

注意：在反撇号中的所有空白都属于字符串的一部分，所以千万小心缩进！

## 字符串占位符 ##

到现在为止，模板字面量在你看来可能就是一个普通字符串的美化版，其实二者真正的区别在于模板字面量中的占位符功能。在一个模板字面量中，你可以把任何合法的javascript表达式嵌入到占位符中并将其作为字符串的一部分输出到结果中。

占位符由一个左侧的$\{和右侧的\}符号组成，中间可以包含任意的javascript表达式。如下，可以直接将一个本地变量嵌入到输出的字符串中：

let name = "Nicholas",
        message = `Hello,${name}.`;
    console.log(message);//"Hello,Nicholas."

占位符$\{name\}访问本地变量name并将其插入到message字符串中，然后变量message就会一直保留着替换后的结果。