Templatejavascript
String Literals(字符串字面量)html
Tag Literals(标签字面值)java
用来解决字符串拼接问题,从 ES6 开始能够这样定义字符串了。express
`string text` `string text line 1 string text line 2` `string text ${expression} string text`
在这里你能够任意插入变量或者表达式,只要用 ${}
包起来就好。数组
ES5安全
let html html = '<div>'+ '<p>你好啊</p>'+ '</div>' console.log(html) //<div><p>你好啊</p></div>
ES6函数
html = `<div> <p>你好啊</p> </div>` console.log(html) //<div> // <p>你好啊</p> //</div>
ES5学习
const a = 20 const b = 10 const c = 'javascript' const str = 'my age is' + (a + b) + ' i love' + c console.log(str) //my age is 30 i love javascript
ES6spa
const str = `my age is ${a + b} i love ${c}` console.log(str) //my age is 30 i love javascript
前面的字符串字面量解决了字符串拼接的问题,对于包含复杂逻辑的字符串并非简单的表达式能搞定的。因此须要另外一种解决方案:Tag Literals3d
ES5
const retailPrice = 20 const wholeSalePrice = 16 let showText = '' if (type === 'retail') { showText = '您这次购买的单价是:' + retailPrice } else { showText = '您这次购买的批发价是:' + wholeSalePrice } console.log(showText)
ES6
const name = 'tom' const gender = true function myTagFuc (string) { console.log(string) // ["hey, ", " is a ", "", raw: Array(3)] } const result = myTagFuc`hey, ${name} is a ${gender}` // 拿到的结果是模板字符串分割过以后的结果,由于里面可能掺这表达式,因此是个数组
除了数组以外,还能够拿到在模板字符串中全部拿到的表达式返回值 ,上面能够拿到name和gender
const name = 'tom' const gender = true function myTagFuc (string, name, gender) { console.log(string) // ["hey, ", " is a ", "", raw: Array(3)] console.log(name) // tom console.log(gender) // true } const result = myTagFuc`hey, ${name} is a ${gender}`
若是咱们函数有返回值,那么会做为总体的模板字符串返回值返回
const name = 'tom' const gender = true function myTagFuc (string, name, gender) { return 123 } const result = myTagFuc`hey, ${name} is a ${gender}` console.log(result) // 123
想要原样返回那么在函数内部进行拼装
const name = 'tom' const gender = true function myTagFuc (string, name, gender) { const sex = gender ? 'man' : 'woman' return string[0] + name + string[1] + sex + string[2] } const result = myTagFuc`hey, ${name} is a ${gender}` console.log(result) // hey, tom is a man
相比较正则和indexOf,这种会便捷有不少,这三个都是
const message = `Error: foo is not defined.` console.log(message.startsWith('Error')) // true console.log(message.endsWith('.')) // true console.log(message.includes('foo')) // true console.log(message.includes('foo', 8)) // false