ES6之字符串相关知识

ES6之字符串相关知识

查询字符串

如果我们想要查找一个字符串，但不想要它的索引位置，我们可以使用以下的API：

• includes
• startsWith
• endsWith

同时还有一个批量复制的API：

• repeat

示例如下：

const text='前端很棒'

console.log(text.includes('很'))  //true
console.log(text.startsWith('前端'))  //true
console.log(text.endsWith('棒'))  //true
console.log(text.repeat(3))  //前端很棒前端很棒前端很棒

粘性匹配

const text='Hello World'
const reg=/W\w+/y
reg.lastIndex=6
console.log(reg.test(text))

当我们在使用正则表达式时需要在固定的索引匹配字符串，可以使用粘性匹配。只需要添加一个粘连标记 y 就可以了。然后再通过 lastIndex 指定一个匹配位置即可。

模版字符串

模版字符串的出现解决了原来ES5时期多行字符串和字符串拼接产生的问题。

const el1='浏览器'
const el2='nodejs'
const text=`这是一段前端代码
它包括${el1}和${el2}\n同时还可以嵌套
${`这是嵌套：${el1}和${el2}`}`;
console.log(text)

输入文本：

这是一段前端代码
它包括浏览器和nodejs
同时还可以嵌套
这是嵌套：浏览器和nodejs

它通过自然的语言来进行处理，而且使用起来很方便。弥补了原来的不足。注意：${} 里面书写的一定是js表达式。不能传入一些判断语句之类的东西。

模版字符串标记

const txt=document.querySelector('#txt')
const btn=document.querySelector('#btn')
const input=document.querySelector('#input')
btn.addEventListener('click',()=>{
    input.innerHTML=safe`<p>${txt.value}</p>`
})
function safe(parts){
    //parts为插值拆分的部分，values为插值部分
    const values=Array.prototype.slice.apply(arguments).slice(1)
    let str='';
    //通过循环的方式将两部分拼接起来
    for(let i=0;i<values.length;i++){
        //替换values中的内容，将特殊字符替换为普通字符
        const v=values[i].replace(/</g,'&lt;').replace(/>/g,'&gt;')
        str+=`${parts[i]}${v}`
        if(i===values.length-1){
            str+=parts[i+1]
        }
    }
    return str
}

我们首先看safe函数，这是模版字符串前面添加的函数。通过这种方式，我们可以修改模版字符串原有的结构。
在这个例子中，所有在输入框输入的特殊字符都会通过替换的方式变为普通字符。在最后一次循环时，由于parts部分永远比values部分多一个，所以需要单独加一次。同时，ES6中还提供了一个API：

console.log(String.raw`abc\n\rdef`)  //abc\n\rdef

String.raw 可以将特殊字符转义为普通字符。