javascript模板字符串（標簽函數）

前面介紹了javascript的模板字符串的基本知識，今天深入學習一下標簽函數

模板字符串概述

這里先簡單說一下模板字符串的概念

1、模板字符串，從名字上可以得出其實返回的是字符串，普通使用其實就想引號一樣的使用，只是加了一些功能

注：先這些實驗例子都是自瀏覽器控制台中測試的。

當做引號使用，返回字符串

`aaaaa`
//返回字符串"aaaaa"

插入表達式，其實有點格式化輸出的感覺

var a=123;
`aaa${a}aaa`
//返回字符串"aaa123aaa"

帶標簽的模板字符串，可以自定義函數處理模板字符串

var person = 'Mike';
var age = 28;
​
function myTag(strings, personExp, ageExp) {
​
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
​
  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];
​
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
 } else {
    ageStr = 'youngster';
 }
​
  return str0 + personExp + str1 + ageStr;
​
}
​
var output = myTag`that ${ person } is a ${ age }`;
​
console.log(output);
//輸出字符串that Mike is a youngster

這里需要注意的一點是，使用標簽函數時，模板字符串會解析成字符串數組跟各個${}的值，然后傳入標簽函數中，因為標簽函數的入參就是這樣的，下面會深入將標簽函數的。

標簽函數定義

標簽使您可以用函數解析模板字符串。

標簽函數的第一個參數包含一個字符串值的數組。其余的參數與表達式相關。最后，你的函數可以返回處理好的的字符串（或者它可以返回完全不同的東西，全看標簽函數的處理）。用於該標簽的函數的名稱可以被命名為任何名字。

下面看一下標簽函數的組成

function Tag(strings, personExp，ageExp,...)
//strings:字符串數組，這個其實就是以${}分分隔符分割得到的數組
//personExp：模板字符串中第一個${}的值
//ageExp：模板字符串中第二個${}的值
//...：模板字符串中第n個${}的值

我們可以看個例子，console.log可以打印出來

console.log `aaa${1}bbb`
//['aaa','bbb'] 1
console.log `aaa${1}b${2}bb`
//['aaa','b','bb'] 1 2

可以很好的看到，使用標簽函數時，模板字符串會被分解成各部分，然后傳入標簽函數中進行處理。

而標簽函數怎么處理完全看函數內部是怎么實現的了，上面例子中實現的myTag標簽函數就是拼接字符串然后返回，就相當於字符串拼接的功能。

拓展問題--內置函數作標簽函數使用

從上面學習，標簽函數是可以自己實現的，除了內置的標簽函數，用內置函數是不是也可以作標簽函數呢

我們用alert函數試一下

alert`aa${1}bbb`
//返回字符串"aa,bbb"
//實際模板字符串分解后的數據是['aa','bbb'] 1

為什么呢，猜想原因有兩個

1、alert內置函數的入參可能只有一個，所以只傳入了數組

2、alert內置函數的內部處理邏輯是把數組內容拼接，以,分割

驗證第一個猜想

使用另一個函數，上面例子也是用過的console.log，

console.log(obj1 [, obj2, ..., objN]);

這個函數入參有很多個

console.log `aaa${1}bbb`
//['aaa','bbb'] 1
console.log `aaa${1}b${2}bb`
//['aaa','b','bb'] 1 2

從輸出結果來看，這個就把所有參數都傳入了

驗證第二個猜想

上面console.log的例子也證明了第二個猜想，跟alert不同，console.log沒有做處理，而是將輸入直接輸出，跟alert不一樣

結論

1、可自定義標簽函數

2、js內置函數也可作為標簽函數，但是需要考慮入參數量，及處理邏輯