ES6

ES6学习笔记9:字符串更进一步之标签模版字符串

Posted by mieruko on 2016-12-18

前言

之前写过一篇ES6中字符串的，主要是每个点都点一下，没有对模版这一块做太多的介绍。
今天讲一讲模版字符串的进阶版，标签模版字符串。
字符串的第一篇博客在这里: ES6字符串第一篇博客。

标签模版字符串的基本形态

1
let template_string = 函数名`模版字符串`;

楼上有点丑，我也知道。
标签模版字符串的意思是说，把函数名当做一个标签附加到模版字符串的前面，那么这个函数就可以对这个模版字符串做一些处理。
标签就是函数，不过是用起来和普通的函数有些区别😁。

标签函数用起来！

来看一段完整的代码: 

1
2
3
4
5
6
7
8
9
10
11
12
'use strict';

let dessert = '🍰',
    drink  = '🍵';

let breakfast = kitchen`今天的早餐是
  ${dessert} 与 ${drink}!`

function kitchen(strings, ...values) {
    console.log(strings);
    console.log(values);
}

strings和values分别是两个数组，包含了模版的两个部分。
strings就是你手写的那一部分，而values就是${}包含的那部分，变量部分。

标签函数还原原来的字符串

在第二部分知道了啥是啥之后，我们就可以用这些东西做个组合，比如还原之前的字符串哈哈哈哈！ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
'use strict';

let dessert = '🍰',
    drink  = '🍵';

let breakfast = kitchen`今天的早餐是
  ${dessert} 与 ${drink}!`

function kitchen(strings, ...values) {
    let result = "";
    for(var i=0; i<values.length; i++) {
      result += strings[i];
      result += values[i];
    }
    result += strings[strings.length - 1];

    return result;
}  
console.log(breakfast);

如此一来，我们就把拆开的字符串组装回去了。
当然，这看起来好像很无聊。。。。（逃）。

结语

楼上先介绍了一下特性，然后玩了个小游戏。
我认为这个特性主要的用途还是说，拆开后的字符串，你对它做一些检查，达到筛除不合法字符串的目的。
好啦，这块的补充就到这里！^_^

FEATURED TAGS
ES6