字符串模板

字符串模板是ES6新增的字符串处理特性，它有以下特点：

  • 多行字符串：ES5中字符串不允许换行，在字符串模板则支持了这个功能
  • 字符串模板：定义基本的字符串模板，动态替换模板中的变量
  • HTML插值：转义字符串，并安全的插入到HTML中

基本语法

ES6中，使用一对反引号（和）包含字符串模板

  1. let hello = `Hello World`;

多行字符串

直接在需要换行的位置插入换行符即可，无需新增任何表示换行的代码（比如：\n）

  1. let hello = `Hello
  2. World`;
  3. console.log(hello); //Hello
  4. World

多行文本可以更好的支持HTML代码的显示

  1. let hello = `<div>
  2.     <p>Hello World</p>
  3. </div>`;

变量替换

在字符串中定义一个固定内容模板，其他需要动态变化的内容使用一对符号${和}包含起来，这部分变化的内容实际上一个表达式，可用于包含变量名或者运算式

  1. let name = 'Ken';
  2. let hello = `Hello , ${name}`;
  3. console.log(hello); //Hello , Ken
  5. let str2 = `Hello, ${name+'HHH'}`;
  6. console.log(str2); //Hello, KenHHH