ES6学习笔记4：模板字符串

Posted on
模板字符串（Template String）也称为模板字面量（Template Literals），是构建字符串的语法糖，在模板字符串中的标签能帮助开发者动态地定义字符串。

模板字符串

模板字符串（Template String）也称为模板字面量（Template Literals），是构建字符串的语法糖，在模板字符串中的标签能帮助开发者动态地定义字符串。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 基本字面量
`This is a pretty little template string.`
// 多行字符串
`In ES5 this is
 not legal.`
// 插入变量绑定
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// 转义字符会被直接编译为一般字符
String.raw`In ES5 "\n" is a line-feed.`
// func_name`tem${v}plate`的形式可以修改模板字符串的结果，这也被称为标签化模板字面量
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

关于标签化模板字面量形式（Tagged Template Literals）的进一步理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function test(t,a,b){
  console.log(arguments);
  /*
  Output:
  Arguments [
    Array [
      "hello",
      "template",
      "haha"
    ],
    "a",
    "b"
  ]
  */
  return 'hey, ' + a + ' and ' +b;
  // Or do whatever you wanna do...
}
let a = 'a';
let b = 'b';
test`hello${a}template${b}haha`
// hey, a and b

可以看出，这种方法可以对该模板进行自定义逻辑的修改。

知识点总结

  1. 使用模板字符串构建字符串；
  2. 使用函数修改模板字符串的返回值。

参考

  1. BabelJS - Learn ES2015