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类似的参数。