前言

字符串標(biāo)簽函數(shù)是一種特殊的函數(shù)調(diào)用語法，它賦予開發(fā)人員處理模板字面量的能力，從而以更加靈活和控制的方式生成和操作字符串。本文將深入探討ES6中字符串標(biāo)簽函數(shù)的工作原理，并結(jié)合具體的代碼示例展示它在字符串格式化、國(guó)際化、模板解析和生成，以及自定義字符串操作等方面的威力。

工作原理

字符串標(biāo)簽函數(shù)通過在模板字面量前面使用函數(shù)名進(jìn)行調(diào)用。當(dāng)調(diào)用模板字面量時(shí)，JavaScript引擎會(huì)將模板字面量分解為多個(gè)字符串和表達(dá)式部分，并將這些部分作為參數(shù)傳遞給字符串標(biāo)簽函數(shù)。標(biāo)簽函數(shù)可以根據(jù)需要處理這些參數(shù)，并返回處理后的結(jié)果。

案例

1. 字符串格式化

這段代碼展示了一個(gè)字符串標(biāo)簽函數(shù)的示例，用于將價(jià)格格式化為人民幣形式。

function formatCurrency(strings, ...values) {
  // strings 參數(shù)是一個(gè)字符串?dāng)?shù)組，包含模板字面量中的字符串部分
  // values 參數(shù)是一個(gè)數(shù)組，包含模板字面量中的表達(dá)式部分的值
  // 將模板字面量中的字符串和表達(dá)式部分拼接在一起，并格式化價(jià)格為人民幣形式
  return strings[0] + values[0].toLocaleString('en-US', { style: 'currency', currency: 'CNY' });
}
const price = 42.99;
const formatted = formatCurrency`The price is: ${price}`;
console.log(formatted);
// 輸出: "The price is: CN￥42.99"

formatCurrency 函數(shù)接收一個(gè)字符串?dāng)?shù)組 strings 和一個(gè)值數(shù)組 values 作為參數(shù)，分別包含了模板字面量中的字符串部分和表達(dá)式部分的值。

在函數(shù)內(nèi)部，我們首先將模板字面量中的第一個(gè)字符串 strings[0] 追加到最終的結(jié)果字符串中，即 "The price is: "。

然后，我們?cè)L問值數(shù)組 values 中的第一個(gè)值 values[0]，即價(jià)格。通過調(diào)用 toLocaleString 方法，我們將價(jià)格格式化為人民幣形式。我們傳遞了一個(gè)選項(xiàng)對(duì)象作為參數(shù)，其中 style 設(shè)置為 'currency' 表示格式化為貨幣形式，currency 設(shè)置為 'CNY' 表示使用人民幣作為貨幣單位。

最后，我們將格式化后的價(jià)格字符串追加到最終的結(jié)果字符串中。

在示例中，我們將價(jià)格值設(shè)置為 42.99，并調(diào)用 formatCurrency 函數(shù)，將模板字面量 The price is: ${price} 作為參數(shù)傳遞給字符串標(biāo)簽函數(shù)。

函數(shù)的執(zhí)行過程中，將字符串 "The price is: " 追加到結(jié)果字符串中。接著，通過 toLocaleString 方法將價(jià)格值 42.99 格式化為人民幣形式，結(jié)果為 "¥42.99"。然后，將格式化后的價(jià)格字符串追加到最終的結(jié)果字符串中。

最終，輸出的結(jié)果是 "The price is: ¥42.99"，實(shí)現(xiàn)了將價(jià)格格式化為人民幣形式的功能。

2. 國(guó)際化和本地化

這段代碼展示了一個(gè)字符串標(biāo)簽函數(shù)的示例，用于根據(jù)當(dāng)前語言環(huán)境進(jìn)行翻譯

function translate(strings, ...values) {
  const lang = 'en'; // 假設(shè)當(dāng)前語言為英語
  const translations = {
    'Hello': '你好',
    'world': '世界'
  };
  let result = '';
  strings.forEach((string, index) => {
    result += string;
    if (values[index] !== undefined) {
      result += translations[values[index]] || values[index];
    }
  });
  return result;
}
const greeting = translate`${'Hello'}, ${'world'}!`;
console.log(greeting);
// 輸出: "你好, 世界!"

translate 函數(shù)接收一個(gè)字符串?dāng)?shù)組 strings 和一個(gè)值數(shù)組 values 作為參數(shù)，分別包含了模板字面量中的字符串部分和表達(dá)式部分的值。

在函數(shù)內(nèi)部，我們定義了一個(gè)名為 lang 的變量，假設(shè)其值為 'en'，表示當(dāng)前語言為英語。同時(shí)，我們定義了一個(gè)名為 translations 的對(duì)象，其中包含了一些常見詞匯的翻譯映射。

然后，我們使用 forEach 方法遍歷 strings 數(shù)組。對(duì)于每個(gè)字符串，我們將其追加到最終的結(jié)果字符串 result 中。然后，我們檢查對(duì)應(yīng)的 values 數(shù)組中是否存在值。如果存在，則嘗試從 translations 對(duì)象中查找對(duì)應(yīng)的翻譯值，如果找到了翻譯，則將翻譯結(jié)果追加到最終的字符串中；否則，將原始值追加到最終的字符串中。

最后，我們返回生成的最終字符串。

在示例中，我們調(diào)用 translate 函數(shù)，將模板字面量 Hello, ${'world'}! 作為參數(shù)傳遞給字符串標(biāo)簽函數(shù)。

函數(shù)的執(zhí)行過程中，將字符串 'Hello, ' 追加到結(jié)果字符串中。接著，檢查表達(dá)式部分的值 'world'，并在 translations 對(duì)象中查找對(duì)應(yīng)的翻譯。由于我們假設(shè)當(dāng)前語言為英語，而翻譯對(duì)象中包含了 'Hello' 和 'world' 的翻譯映射，所以將 '你好' 和 '世界' 分別追加到最終的字符串中。

最終，輸出的結(jié)果是 "你好, 世界!"，實(shí)現(xiàn)了根據(jù)當(dāng)前語言環(huán)境進(jìn)行翻譯的功能。

3. 模板解析和生成

代碼展示了一個(gè)簡(jiǎn)單的字符串標(biāo)簽函數(shù)的示例，用于生成報(bào)告。

function generateReport(strings, ...values) {
  // strings 參數(shù)是一個(gè)字符串?dāng)?shù)組，包含模板字面量中的字符串部分
  // values 參數(shù)是一個(gè)數(shù)組，包含模板字面量中的表達(dá)式部分的值
  let report = '';
  for (let i = 0; i < strings.length; i++) {
    report += strings[i];
    if (values[i] !== undefined) {
      // 將模板字面量中的表達(dá)式部分的值添加到報(bào)告字符串中
      report += values[i];
    }
  }
  return report;
}
const name = '張三';
const age = 28;
const report = generateReport`Name: ${name}, Age: ${age}`;
console.log(report);
// 輸出: "Name: 張三, Age: 28"

generateReport 函數(shù)接收一個(gè)字符串?dāng)?shù)組 strings 和一個(gè)值數(shù)組 values 作為參數(shù)，分別包含了模板字面量中的字符串部分和表達(dá)式部分的值。

在函數(shù)內(nèi)部，我們使用一個(gè)循環(huán)來遍歷 strings 數(shù)組。對(duì)于每個(gè)字符串，我們將其追加到報(bào)告字符串 report 中。然后，我們檢查對(duì)應(yīng)的 values 數(shù)組中是否存在值。如果存在，則將值追加到報(bào)告字符串中。

最后，我們返回生成的報(bào)告字符串。

在示例中，我們定義了一個(gè)名為 name 的變量，其值為 '張三'，還定義了一個(gè)名為 age 的變量，其值為 28。然后，我們調(diào)用 generateReport 函數(shù)，將模板字面量 Name: ${name}, Age: ${age} 作為參數(shù)傳遞給字符串標(biāo)簽函數(shù)。

函數(shù)的執(zhí)行過程中，將字符串 'Name: ' 追加到報(bào)告字符串中，然后將變量 name 的值 '張三' 追加到報(bào)告字符串中。接著，將字符串 ', Age: ' 追加到報(bào)告字符串中，再將變量 age 的值 28 追加到報(bào)告字符串中。

最終，輸出的結(jié)果是 "Name: 張三, Age: 28"，其中包含了模板字面量中的字符串部分和表達(dá)式部分的值。

這樣，我們通過使用字符串標(biāo)簽函數(shù)，可以輕松地根據(jù)模板生成自定義的報(bào)告字符串。

4. 自定義字符串操作

展示了一個(gè)自定義的字符串標(biāo)簽函數(shù)的示例，用于進(jìn)行特定的字符串操作

function customOperation(strings, ...values) {
  // strings 參數(shù)是一個(gè)字符串?dāng)?shù)組，包含模板字面量中的字符串部分
  // values 參數(shù)是一個(gè)數(shù)組，包含模板字面量中的表達(dá)式部分的值
  let result = '';
  strings.forEach((string, index) => {
    // 將字符串部分轉(zhuǎn)換為大寫，并將結(jié)果拼接到最終的字符串中
    result += string.toUpperCase();
    if (values[index] !== undefined) {
      // 將表達(dá)式部分的值拼接到最終的字符串中
      result += values[index];
    }
  });
  return result;
}
const text = 'hello';
const modified = customOperation`Original text: ${text}`;
console.log(modified);
// 輸出: "ORIGINAL TEXT: hello"

customOperation 函數(shù)接收一個(gè)字符串?dāng)?shù)組 strings 和一個(gè)值數(shù)組 values 作為參數(shù)，分別包含了模板字面量中的字符串部分和表達(dá)式部分的值。

在函數(shù)內(nèi)部，我們使用 forEach 方法遍歷 strings 數(shù)組。對(duì)于每個(gè)字符串，我們將其轉(zhuǎn)換為大寫形式，并將結(jié)果追加到最終的字符串 result 中。然后，我們檢查對(duì)應(yīng)的 values 數(shù)組中是否存在值。如果存在，則將值追加到最終的字符串中。

最后，我們返回生成的最終字符串。

在示例中，我們定義了一個(gè)名為 text 的變量，其值為 'hello'。然后，我們調(diào)用 customOperation 函數(shù)，將模板字面量 Original text: ${text} 作為參數(shù)傳遞給字符串標(biāo)簽函數(shù)。

函數(shù)的執(zhí)行過程中，將字符串 'Original text: ' 轉(zhuǎn)換為大寫形式，并將結(jié)果追加到最終的字符串中。接著，將變量 text 的值 'hello' 追加到最終的字符串中。

最終，輸出的結(jié)果是 "ORIGINAL TEXT: hello"，其中包含了模板字面量中的字符串部分和表達(dá)式部分的值。

這樣，我們可以根據(jù)特定的業(yè)務(wù)邏輯對(duì)模板字面量進(jìn)行自定義的字符串操作，例如轉(zhuǎn)換為大寫、添加特定的前綴或后綴等。

到此這篇關(guān)于你不知道的JS ES6字符串標(biāo)簽函數(shù)分享的文章就介紹到這了,更多相關(guān)JS ES6字符串標(biāo)簽函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論