Javascript 进阶 10-1 样板字面值（Template literals）基本介绍

本篇文章主要来介绍样板字面值（Template literals）

在早期的版本，也被称作 Template String 。

先来看看是甚么样的情境会使用到吧~!

const days = 14;const str = '好烦阿';const sentence = '我的肠胃炎已经 ' + days + ' 天没好了，真的是' + str;console.log(sentence);

以往这样利用Js字串与变数，串出想要的资料结构时，就会显得很麻烦，并且很不直观。

还需要特别加上 ' 或是 + ，根据不同团队的撰写风格，也会有是否要留空白的疑虑。

而样板字面值，提供了更值观的方法来处理这样的情境问题。同样也是属于ES6的新增语法，所以在使用上还是要注意浏览器的兼容性。

那我们就来看看要怎么使用吧~

const days = 14;const str = '好烦阿';// const sentence = '我的肠胃炎已经' + days + '天没好了，真的是' + str;const sentence = `我的肠胃炎已经天没好了，真的是`;console.log(sentence);

我们先把原本的注解掉，并且把变数、加号、字串的单引号给拿掉，并也在最外面加上反引号，也就是tab键上面的那一颗。

之后，在需要串接变数的地方使用${变数或是表达式}，就可以顺利的将字串组合起来噜~

const sentence = `我的肠胃炎已经${days}天没好了，真的是${str}`;

那如果要加上空白，也可以直接在 ${变数或是表达式} 前后加上空白就可以噜~

刚刚也有提到除了变数以外也可以放入表达式对吧! 那我们来看看要怎么组合~

const days = 14;const str = '';const sentence = `我的肠胃炎已经${days}天没好了，真的是${ str || '好烦阿' }`;console.log(sentence);

这样组合也是可以的喔~

再来看看别的範例~

如果今天我们想要利用 Js 产生这样的 html 结构:

<ul>    <li>我是 XXX，身上有 XX 元</li>    <li>我是 XXX，身上有 XX 元</li>    <li>我是 XXX，身上有 XX 元</li></ul>

Js 资料的结构可能长这样:

const data = [{    name: '小明',    cash: 500},{    name: '小华',    cash: 1000},{    name: '小夫',    cash: 1500}];

以传统的做法，我们应该会这样做~

const listString = '<ul>\    <li>我是 XXX，身上有 XX 元</li>\    <li>我是 XXX，身上有 XX 元</li>\    <li>我是 XXX，身上有 XX 元</li>\</ul>';// ======== 或是 ===================const listString = '<ul>' +    '<li>我是 XXX，身上有 XX 元</li>' +    '<li>我是 XXX，身上有 XX 元</li>' +    '<li>我是 XXX，身上有 XX 元</li>' +'</ul>';

利用这两种方式组成字串，在分别加入变数内容

const listString = '<ul>\    <li>我是' + people[0].name + '，身上有 ' + people[0].cash + ' 元</li>\    <li>我是 ' + people[1].name + '，身上有 ' + people[1].cash + ' 元</li>\    <li>我是 ' + people[2].name + '，身上有 ' + people[2].cash + ' 元</li>\</ul>';// ======== 或是 ===================const listString = '<ul>' +    '<li>我是 ' + people[0].name + '，身上有 ' + people[0].cash + ' 元</li>' +    '<li>我是 ' + people[1].name + '，身上有 ' + people[1].cash + ' 元</li>' +    '<li>我是 ' + people[2].name + '，身上有 ' + people[2].cash + ' 元</li>' +'</ul>';

组合好以后应该会是像上面这样~

但是变数一多，资料一多的话，不仅撰写花时间，维护也很困难。

这时候如果使用样板字面值的话，就可以很轻鬆地解决这个问题~!

const listString = `<ul>    <li>我是 ${people[0].name}，身上有 ${people[0].cash} 元</li>    <li>我是 ${people[1].name}，身上有 ${people[0].cash} 元</li>    <li>我是 ${people[2].name}，身上有 ${people[0].cash} 元</li></ul>`;

你会发现一把结构贴进反引号，也不用特别做其他的修正，变数的部分一样也可以透过 ${变数或是表达式} 进行串接，轻鬆的把结构给做出来了~!

以上就是样板字面值的概略介绍，如果没有问题的话就可以看下一篇文章，会介绍更多进阶的用法喔!

汪汪~