js模板字符串

文章目錄

• 資料與筆記
• 定義
• 語法形式
• 模板字符串特征(反引號,占位符,標簽)
• 字符串插值示例
• 模板嵌套
• 帶標簽的模板字符串
• 總結

資料與筆記

資料原文
作者筆記pdf

定義

模板字面量(模板字符串): 允許在其中嵌入表達式的字符串字面量

• 屬於字符串字面量

• 允許將表達式嵌入其中(字符串插值)

• 可以是多行字符串

主要功能:

​ 字符串插值(使用混合常量、變量、字面量和表達式的字符串字面量構造新 String值)

---

語法形式

• 單行簡單字符串

  ` string text`
  

• 多行簡單字符串

  `string text line1
   string text line2`
  

• 帶占位符

  `string text ${expression} string text`
  

• 帶標簽

  tag`string text string text`
  

• 以上幾種的混合

  tag `string text ${expression} string text`
  

---

模板字符串特征(反引號,占位符,標簽)

• 反引號:

  • 普通字符串字面量: 用單引號或雙引號標識
  • 模板字符串字面量: 用反引號(``)標識
  • 引號轉義問題:
    • 普通字符串字面量內使用單雙引號: 需要反斜杠\轉義
    • 模板字符串內使用反引號:
      • 模板字符串嵌套: 無需轉義
      • 其他: 需要反斜杠\轉義

• 占位符: 形如 ${expression}的語法結構

  ​ 占位符中表達式會和周圍的文本一起被傳遞給一個默認的函數, 該函數負責將所有的部分連接起來,返回最終組合的新字符串的值.

• 標簽

  • 模板字符串若由表達式開頭,該表達式被稱為標簽

  • 標簽通常是一個函數(或者最終值為函數類型的復雜表達式)

  • 標簽函數會在模板字符串處理完畢,形成最終輸出之前被調用

    (各占位符表達式的值和前后其他普通字符串 被當做參數傳給該標簽函數)

---

字符串插值示例

• 不使用模板字符串:

  var a = 5;
  var b = 10;
  console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
  // "Fifteen is 15 and
  // not 20."
  

• 模板字符串

  var a = 5;
  var b = 10;
  console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
  // "Fifteen is 15 and
  // not 20."
  

  ---

模板嵌套

• 用法: 在外層模板的占位符${}內再用反引號使用模板字符串

  • 嵌套位置: 占位符${}內,而非占位符外,無需轉義反引號

• 理解: 相當於多次調用模板字符串的默認處理函數(圖示)

  我們將模板字符串分割為不同兩組:

  

  默認函數的功能圖:

  

• 實例說明

  代碼:

  var fullName = 'peter.Zhang';
  var firstName = 'peter';
  var lastName = 'Zhang';
  
  var test1 = `I am ${fullName}`;
  var test2 = `I am ${`${firstName}.${lastName}`}`;
  

  test1的執行過程示意圖:

  

  test2的執行過程示意圖:

  

---

帶標簽的模板字符串

• 標簽函數的傳參

  • 第一個參數為一個字符串數組strings(普通字符串)

  • 其余的參數與表達式相關(各個同級占位符的值)

  按照前面我們對模板字符串的分割,傳參情況是這樣的:(假設標簽函數名為tag)

  tag( [s1,s2,s3,…,s_n+1], Ve1, Ve2, …, Ven )

  舉例說明:

  var fullName = 'peterZhang';
  var firstName = 'peter';
  var lastName = 'Zhang';
  
  var str = showArgs`My name is ${showArgs`${firstName}_${lastName}`}`;
  
  //函數定義區-----------------------------------------------------------
  function showArgs(){
  	var args = arguments;
  	console.log(args);
  }
  

  控制台輸出:
  

  注: 第二行最后一項為undefined是因為我們嵌套的內層標簽函數沒有返回任何值給外層標簽函數使用, 因此外層函數取占位符的值為undefined.

• 返回值的多樣性

  ​ 標簽函數不一定必須返回一個字符串(可以返回為其他類型, 或者像上例一樣,不返回任何值)

  返回函數類型舉例:

  function template(strings, ...keys) {
      return (
          function(...values) {
      		var dict = values[values.length - 1] || {};
      		var result = [strings[0]];
      		keys.forEach(function(key, i) {
      			var value = Number.isInteger(key) ? values[key] : dict[key];
      			result.push(value, strings[i + 1]);
      		});
      		return result.join('');
      	}
      );
  }
  var t1Closure = template`${0}${1}${0}!`;
  t1Closure('Y', 'A'); // "YAY!"
  var t2Closure = template`${0} ${'foo'}!`;
  t2Closure('Hello', {foo: 'World'}); // "Hello World!"
  

• 第一參數的raw屬性(未求值替換的原始模板字符串)

  ​ 第一參數(保存所有普通字符串的數組)含有一個raw屬性(數組也是對象,可以添加屬性),他保存了未進行求值核替換的原模板字符串的原始值.

  function tag(strings) {
  	console.log(strings.raw[0]);
  } 
  tag`string text line 1 \n string text line 2`;
  // logs "string text line 1 \n string text line 2" ,
  // including the two characters '\' and 'n'
  

總結

模板字符串是普通字符串處理的一類語法糖, 它使得一些字符串的操作更簡潔,更加易讀易於理解.