【ES6基础】模板字符串（Template String）

模板字符串是ES6中很是重要的一个新特性，这个特性使得咱们处理相关业务变得更加容易。好比在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号（backticks,`），而不是单引号或双引号。如下是个简单的示例：

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”复制代码

今天的文章将从如下几个方面进行介绍：

• 表达式
• 多行字符串
• 标签模板字符串（Tagged template literals）
• 原始字符串(Raw strings)

本篇文章阅读时间预计6分钟

表达式

模板字符串的出现，给ES6添加了“表达式”的概念。在ES6以前，咱们只能用加号链接变量表达式，代码以下：

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);复制代码

自从模板字符串表达式的出现后，咱们嵌入表达式的方式更加简单，即${变量表达式}，变量表达式就至关函数同样，变量传值进行替换。若是咱们要使用自定义的函数处理字符串，咱们可使用标签模板字符串（Tagged template literals），标签函数进行处理（a tag function）。下一小节将会讲到。先让咱们看下如何使用模板字符串嵌入表达式，代码以下：

const a = 20;
const b = 10;
const c = "JavaScript";
const str = `My age is ${a+b} and I love ${c}`;
console.log(str);
//output “My age is 30 and I love JavaScript"复制代码

标签模板字符串

首先咱们先建立一个标记的模板字符串，使用函数处理模板字符串，以下段代码所示：

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: [ 'a+b equals ', ' and a*b equals ', '' ]
  // aPLUSb is: 30
  // aSTARb is: 200
  return 'SURPRISE!';
};
const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);复制代码

编译器是如何处理这段代码的？第一个参数strings包含全部的静态字符串，以表达式变量进行分割成数组（相似split('$')的效果）；而后逐一解析变量表达式，传到对应的参数aPLUSb和aSTARb。

若是咱们想修改aPLUSb, aSTARb的值，咱们能够在函数内部进行修改：

const tag = function(strings, aPLUSb, aSTARb) {
  // strings is: ['a+b equals', 'and a*b equals']
  // aPLUSb is: 30
  // aSTARb is: 200
  aPLUSb = 200;
  aSTARb = 30;
  return `a+b equals ${aPLUSb} and a*b equals ${aSTARb}`;
};

const a = 20;
const b = 10;
let str = tag `a+b equals ${a+b} and a*b equals ${a*b}`;
console.log(str);
//output “a+b equals 200 and a*b equals 30”复制代码

使用此方法咱们能够建立灵活度更高的模板字符串，接收后台数据渲染咱们前端的界面。

多行字符串

Es6的模板字符串给咱们提供了一种建立多行文本字符串的新方法。在ES6以前咱们只能使用"\n“在字符串中进行换行，代码以下：

console.log("1\n2\n3");
//output
//1
//2
//3复制代码

在es6中，咱们能够直接输入回车进行换行，以下段代码所示：

console.log(`1 2 3`);复制代码

模板字符串的方法会在每一行的最后添加"\n"进行换行。

原始字符串(Raw strings)

原始字符串是一个普通字符串，其中不会解释转义字符。咱们可使用模板字符串建立原始字符串。咱们可使用String.raw来获取原始字符串，代码以下：

let s = String.raw `xy\n${ 1 + 1 }z`;
console.log(s); 
//output "xy\n2z"复制代码

这里的\n不被解释成换行符。相反，它是一个由两个字符组成的原始字符串，及“\”和“\n”，变量S的长度为6。若是咱们使用自定义的标签函数处理模板字符串，咱们可使用String.raw方法来获取，代码以下：

let tag = function(strings, ...values) {
  return strings.raw[0]
};
let str = tag `Hello \n World!!!`;
console.log(str);”
//output "Hello \n World!!!"复制代码

可是也有例外(进行转义)：

• 任何以\u开头的内容都将被视为Unicode转义
• 以\x开头的任何内容都将被视为十六进制转义
• 任何以\开头而后跟着一个数字将被视为八进制转义

小节

今天的内容就介绍到这里，模板字符串让咱们处理字符串更加容易，尤为是咱们在渲染前端界面展现数据时，大大减小了代码量，增强了易读性。

【ES6基础】let和做用域

【ES6基础】const介绍

【ES6基础】默认参数值

【ES6基础】展开语法(Spread syntax)

【ES6基础】解构赋值（destructuring assignment）

【ES6基础】箭头函数（Arrow functions）

更多精彩内容，请微信关注”前端达人”公众号！