字符串模板上

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战。

前言

ECMAScript 6.0 简称ES6 , 是 JavaScript 语言的新一代的标准，于在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》。一般情况，泛指， 5.1版以后的标准，涵盖了 ES2015、ES2016、ES2017、ES2018、ES2019、ES2020、ES2021 等等

我们一起来学习

模板字符串

没有模板字符串之前的拼接

没有字符串模板之前，我们常见的拼接手段有两种

+ 号拼接
数组join

+号拼接

每行使用+符号进行拼接。

var htmlStr = '<ul>'  +
'<li>' + '男' + '</li>' +
'<li>' + '女' + '</li>' +
'</ul>'

document.getElementById("id").innerHTML  =  htmlStr;

批量添加节点也类似，for循环，或者map。

Array.prototype.join

先把数据存入数组，然后join(",").

var arr = [];
arr.push( '<ul>');
arr.push( '<li>' + '男' + '</li>');
arr.push( '<li>' + '女' + '</li>');
arr.push( '</ul>');
arr.join('');

不管是单纯的 +拼接，还是数组join，对于换行的处理和需要保持格式的拼接，都是不友好的。

模板字符串

模板字符串使用反引号 ` 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。

var age = 10;

console.log(`my age is ${age}`); 
// my age is 10

`符号

正因为其使用`符号，所以如果字符串里真包含 ` , 就需要转义了。

`\``  // '`'

空格和换行被保留

模板字符串，是会保留空格和换行的，是不是很nice.

var text = `
今天是个好日子，
明天是个好日子！！！！
。

`
console.log(text);

我们可看到，前后的空白行是被保留的，如何去掉这些无用的呢？答案就是String.ptotype.trim

var text = `
今天是个好日子，
明天是个好日子！！！！
。

`
console.log(text.trim());

同样的我们的 \t, \n也会被输出：

var text = `
\n
\t 1
2
`
console.log(text)

``可以嵌套

借用 MDN的例子

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

当然这种写法可读性太差，更建议封装到方法里面，调用方法。

还是以上面的操作为例，我们抽离到函数，利用早退原则，逻辑会非常清晰，可读性大大提高。非常反对大量利用三目，除非你有很好的理由！！！

function getClass(){
 if(isLargeScreen()){
     return ''
 }
 if(item.isCollapsed){
     return "icon-expander"
 }
 
 return "icon-collapser"
 
}

const classes = `header ${getClass()}`;

上面的例子，更好的解答，当然是利用 classnames工具库。

import cn from "class"

const isLarge = isLargeScreen();
const classes = cn({
    header: true,
    'icon-expander':  !isLarge && item.isCollapsed ,
    'icon-collapser': !isLarge && !item.isCollapsed 
})

8进制，16进制表示字符

我们知道字符有很多表现形式。

'\141'   // 'a'
'\x61'   // 'a'
'\u0061' // 'a'
'\u{61}' // 'a'

我们看看，是不是在字符串模板中都可以使用。

`\141`   
// Uncaught SyntaxError: Octal escape sequences are not allowed in template strings.

`\x61`   // 'a'
`\u0061` // 'a'
`\u{61}` // 'a'

答案，唯独8进制的不可以。

小结

今天你收获了吗？

引用

模板字符串
 es6.ruanyifeng.com/#docs/strin…

字符串模板 上

前言