[譯]JavaScript:ES6中的模板字符串簡介

原文:http://tc39wiki.calculist.org/es6/template-strings/

---

ES6中的模板字符串(template string)是一種能在字符串文本中內嵌表達式的字符串字面量(string literal).這種操作在其他語言(比如shell->perl->php等)中通常稱之為字符串內插(string interpolation)或者叫變量內插(Variable interpolation).模板字符串在早期的Harmony提案中稱之為半字面量(Quasi Litaral),現已更名為模板字符串.

模板字符串使用反引號(backtick或者叫backquote)來代替普通字符串中的雙引號(double quote)或單引號(single quote).模板字符串可以包含有占位符(placeholder),占位符使用${ }這樣的語法.占位符中表達式的值以及占位符兩邊的文本會一起傳遞給一個標簽函數(Tag function).這個函數是由模板字符串開頭(左邊的反引號之前)的一個可選的表達式決定的.如果模板字符串開頭沒有任何表達式,則會使用默認的標簽函數.

默認模板字符串

如果不指定標簽函數,則會使用默認的標簽函數,該函數的行為是將模板字符串的每個部分按順序連接成一個字符串並返回.

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}`  // "1 + 2 = 3"

多行字符串

可以使用模板字符串產生多行字符串:

var s = `a
    b
    c`;
assert(s === 'a\n    b\n    c');

所有的字符包括空白符都會被包含在最后的字符串內.

譯者注:相當於python中的三引號:

>>> """a
... b
... c"""
'a\nb\nc'

帶標簽的模板字符串

如果一個模板字符是由一個表達式開頭的,則該模板字符串被稱為帶標簽的模板字符串(tagged template string).開頭的這個表達式就是標簽函數,解析后的模板字符串會作為參數傳入標簽函數.

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 0);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

原始字符串

解析后的模板字符串中還包含了對應字符串的原始形式(未轉義之前的字符串).例如,字符串\n的原始形式包含了兩個字符\和n,而不是單個的換行符.

標簽字符串可以通過讀取第一個參數的raw屬性來獲取到一個模板字符串的原始字符串形式.

function r(strings, ...values) {
  assert(strings.raw[0] === '\\n');
}

r `\n`

ES6提供了一個新的函數String.raw,該函數返回的就是原生字符串.

String.raw `a\n${ 42 }b`  // "a\\n42b"

譯者注:相當於python中的r:

>>> r'\n'
'\\n'

譯者注:目前SpiderMonkey正在實現該特性:https://bugzilla.mozilla.org/show_bug.cgi?id=688857

你可以在這個js shell上體驗一下簡單的功能:http://js-quasis-libraries-and-repl.googlecode.com/svn/trunk/index.html

ESwiki上和ES6草案上有更詳細的參考.