模板字符串

在做react项目中，遇到传参的链接无法发生跳转，现场如下

 <li key={index}>
                    <Link to={'details/${newsItem.uniquekey}'} target="_blank">
                        {newsItem.title}
                    </Link>
                </li>

后来在cmd中，打开node，验证是否是参数传递的语法上出了问题，发现果然是语法问题，自己把反引号（``）写成了英文状态下的单引号('')

image.png

真的是非常粗心了，难怪去搜索相关问题都搜索不到，原来自己是犯了一个低级错误。

不过借此问题，我们来学习一下ES6中的模板字符串~
传统的JS，输出模板通常是这个样子的：

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

这样子的写法，需要敲击N个单引号，非常不方便。于是ES6就引入了模板字符串：

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

一对反引号，从到到位搞定一串输出模板。

【注意】
1、如果要在模板字符串中用使用反引号，需要用反斜杠线转义：

let greeting = `\`Yo\` World!`;

2、如果要在模板字符串中嵌入变量，需要将变量名写在${}之中。变量如果是一个函数的话，可以用${func()}的形式进行调用。

3、如果模板字符串中有多行字符，所有的空格和缩进都会保留在输出之中

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

4、如果你不想保留模板字符串中的空格和换行，可以在反引号外使用trim方法消除它

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());