JavaScript中的-模板字符串字面量

656 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

模板字符串字面量

模板字符串使用两个反引号扩住, 在 `` 内进行书写, 可以打破字符串的单行书写格式, 使用反引号扩住的心, 让我们可以多行书写, 比如在使用 + 拼接的时候, 可以是代码书写格式更明显

在原来要书写换行的字符串时, 可用 () 扩住, 内部使用换行符 \n 进行换行, 不太方便书写, 也不方便阅读...

来对比一下吧:

let old_str = (
  '这是开始第一行, 下面一行则需要使用 换行符进行换行'
  + '\n这是第二行内容,'
  + '\n这个换行符在第二行是中文还明显一些, 如果如下面一行是英文, 再来看看,'
  + '\nhow can you see this line?'
  + '\nhow can you see this line?'
  + '\n上面的 nhow 是什么, 是不是很容易混淆呢?'
);

let new_str = `这是开始第一行, 下面一行则需要使用 换行符进行换行
这是第二行内容,
这个换行符在第二行是中文还明显一些, 如果如下面一行是英文, 再来看看,
how can you see this line?
how can you see this line?
上面的 nhow 是什么, 是不是很容易混淆呢?`

old_str  === new_str // ---> true

占位符 ${}

在字符串模板中, 我们可以使用变量代替定义的值了; 原来使用双引号时的拼接太麻烦了有没有!...

const NAME = 'iwin621'
const AGE = 21

let my_name_old_style = "我的名字是" + NAME + ", 我今年 "+ AGE + "岁了"

let my_name_new_style = `我的名字是 ${NAME},  我今年 ${AGE}岁了`

如上 模板字符串简写, 简单了不少吧

风险成本

这个使用两个反引号的语法, 字符串模板是不是看起来更加优秀呢? 但是这反引号在键盘的左上角, 还是比较容易按错的, 比方说我就经常按成数字键1. 这也就存在潜在的书写错误的概率, 增加了一定的风险成本.

另外, 这种模板为更多的恶意脚本提供了温床, 因为这种模板天生可以解析内部的代码段, 比方写入个 <script>