Bootstrap

ES6中模板语法与字符串处理

ES6 提出了“模板语法”的概念。在 ES6 以前,拼接字符串是很麻烦的事情:

var name = '小明'
var age = '18'
var finalString = '我叫'+ name +',今年'+ age +'岁'

但是有了模板字符串,拼接难度就简单了很多:

var name = '小明'   
var age = '18' 
var finalString = `我叫 ${name}, 今年${age}岁`

字符串不仅更容易拼了,也更易读了,代码整体的质量都变高了。这就是模板字符串的第一个优势——允许用${}的方式嵌入变量。模板字符串一共有两个优势:

●在模板字符串中,空格、缩进、换行都会被保留
●模板字符串完全支持“运算”式的表达式,可以在${}里完成一些计算

基于第一点,可以在模板字符串里无障碍地直接写 html 代码:

let list = `
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
`;

基于第二点,可以把一些简单的计算和调用丢进 ${} 来做

function add(a, b) {
  const sum = `${a} + ${b} = ${a+b}`
  console.log(sum)
}
add(1, 2) // 输出 '1 + 2 = 3'

除了模板语法外, ES6中还新增了一系列的字符串方法用于提升开发效率:


存在性判定:在过去,当判断一个字符/字符串是否在某字符串中时,只能用 indexOf > -1 来做。现在 ES6 提供了includes方法:它会返回一个布尔值来告诉你是否存在。
includes:判断字符串与子串的包含关系:

const son = '小明' 
const father = '小明 小红 小美'
father.includes(son) // true

;