learn icon indicating copy to clipboard operation
learn copied to clipboard

ES6 系列之模板字符串

Open yangtao2o opened this issue 4 years ago • 0 comments

ES6 系列之模板字符串

如果你碰巧要在字符串中使用反撇号,你可以使用反斜杠转义:

let message = `Hello \` World`;
console.log(message); // Hello ` World

值得一提的是,在模板字符串中,空格、缩进、换行都会被保留。

模板字符串支持嵌入变量,只需要将变量名写在 ${} 之中,其实不止变量,任意的 JavaScript 表达式都是可以的。值得一提的是,模板字符串支持嵌套

let arr = [{ value: 1 }, { value: 2 }];
let message = `
  <ul>
    ${arr
      .map(item => {
        return `
        <li>${item.value}</li>
      `;
      })
      .join("")}
  </ul>
`;
console.log(message);

模板标签是一个非常重要的能力,模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串,举个例子:

let x = "Hi",
  y = "Kevin";
var res = messagefn`${x}, I am ${y}`;
console.log(res);

function messagefn(literals, value1, value2) {
  console.log(literals); // [ "", ", I am ", "" ]
  console.log(value1); // Hi
  console.log(value2); // Kevin
}

原文链接:ES6 系列之模板字符串

yangtao2o avatar Apr 06 '20 05:04 yangtao2o