ES6语法（六）模板字符串

1.模板字符串

在ES6之前对字符串的处理是相当麻烦的

• 1.字符串很长要换行
  字符串很长包括几种情形：开发时输入的文本内容、接口数据返回的文本内容。如果对换行符处理不当，就会带来异常。
• 2.字符串中有变量或者表达式
  如果字符串不是静态内容，往往是需要加载变量或者表达式，这个也是很常见的需求。之前的做法是字符串拼接：

var a = 20;
var b = 10;
var c = 'JavaScript';
var str = 'I am ' + (a + b) + 'and I love' + c;
console.log(str) //I am 30and I loveJavaScript

如果字符串有大量的变量和表达式，这个拼接简直是噩梦。

• 3.字符串中有裸机运算
  我们通常写代码都是有逻辑运算的，对于字符串也是一样，它包含的内容不是静态的，通常是根据一定的规则在动态变化。

var retailPrice = 20
var wholesalePrice = 16;
var type = 'retail'

var shoeTxt = ''
if(type === 'retail'){
  shoeTxt += '购买单价为' + retailPrice
} else{
  shoeTxt += '购买单价为'+ wholesalePrice
}

看到这样的代码一定会感到很熟悉，通常大家的做法是使用上述的字符串拼接+逻辑判断，或者采用字符串模板类库来操作。

2.String Literals

看了上述的应用场景，就要引入String Literals话题，这个是解决字符串拼接问题，从ES6开始可以这样定义字符串了。

`string tetx`
`string text line 1`
`string text line 2`
`string text ${expression} string text`

在这里可以任意插入变量或者表达式，只要用${}包起来就好。
这样就可以轻松解决字符串包含或者表达式的问题，对于多行的字符串，之前是这样处理的

console.log('string text line 1\n'+
  'string text line 2'
) 
//string text line 1
// string text line 2

//string text line 1
// string text line 2`
现在可以这样做了

console.log(`string text line 1
  string text line 2`
)
// string text line 1
// string text line 2

完全不需要\n来参与

3.Tag Literals

前面的字符串字面量解决了字符串拼接的问题，对于包含复杂的字符串并不是简单的变大时能搞定的。所以需要另一种解决方案：Tag Literals，还是看上述那个例子：

现在可以定义一个Tag函数，然后用这个Tag函数来充当一个模板引擎：

function Price(string, type){
  let s1 = string[0]
  const retailPrice = 20;
  const wholesalePrice = 16;
  let text = ''
  if(type === 'retail'){
    text += `购买单价为:${retailPrice}`
  } else{
    text += `购买单价为:${wholesalePrice}`
  }
  return `${s1}${text}`
}

let showTxt = Price`此次的${'retail'}`
console.log(showTxt)

string参数指的是Tag函数后面被变量分割开的字符串集合，type参数是对应第一个变量，Tag函数可以有多个type类似的参数。