当前位置：首页 > news >正文

模板字面量标签函数

news 来源：原创 2025/5/18 3:37:28

模板字面量

ES6新增了使用模板字面量定义字符串的能力，保留换行字符，保持反引号内部的空格。

模板字面量在定义模板时特别有用。

let htmlContent=`<div>......</div>`;

字符串插值

模板字面量最常用的一个特性是支持字符串插值。

技术上讲，模板字面量不是字符串，而是一种特殊的JavaScript句法表达式，只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例。

字符串插值通过在${}中使用任何一个JavaScript表达式实现。

所有插入的值都会通过toString()强制转型为字符串。

嵌套的模板字面量无须转义：

console.log(`hello ${`world`}`);

将表达式转为字符串时会调用toString()：

let foo = { toString: () => `world` };

console.log(`hello ${foo}`);

插值表达式可以调用函数：

function capitalize(word) {

return `${word[0].toUpperCase()}${word.slice(1)}`;

}

console.log(`${capitalize("hello")} ${capitalize("world")}`);

模板字面量标签函数

模板字面量支持定义标签函数，通过标签函数可以自定义插值行为。

标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。

标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为。

//模板字面量标签函数
let a = 6;
let b = 9;
let c = 10;
//标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。
//函数返回对模板字面量求值得到的字符串。
//strings被插值记号分隔后的模板。
function simpleTag(strings, aValExpression, bValExpression, sumExpression) {
  console.log(strings); //[ "", " + ", " = ", "" ]
  console.log(aValExpression); //6
  console.log(bValExpression); //9
  console.log(sumExpression); //15

  return "foobar";
}

let untaggedResule = `${a} + ${b} = ${a + b}`;
var taggedResule = simpleTag`${a} + ${b} = ${a + b}`;

console.log(untaggedResule); //"6+9=15"
console.log(taggedResule); //"foobar"

//使用剩余操作符（...），以数组形式存储数量可变的表达式参数。
function restSimpleTag(strings, ...expressions) {
  console.log(strings); //[ "", " + ", " = ", "" ]
  console.log(expressions); //[6, 9, 15]
  for (const expression of expressions) {
    console.log(expression);
  }
  return "foobar";
}

var taggedResule = restSimpleTag`${a} + ${b} = ${a + b}`;
console.log(taggedResule); //"foobar"

//对于有n个插值的模板字面量，模板字面量标签函数接收到的表达式参数始终是n个，第一个参数所包含的字符串个数为n+1。
//拼接字符串
function joinTag(strings, ...expressions) {
  console.log(strings); //[ "", " + "," + ", " = ", "" ]
  console.log(expressions); //[6, 9, 10, 25]
  let result = "";
  for (let i = 0; i < expressions.length; i++) {
    result += strings[i];
    result += expressions[i];
  }
  //console.log(strings.length); //5
  //console.log(strings[strings.length - 1]); //""
  result += strings[strings.length - 1];
  return result;
}
var taggedResule = joinTag`${a} + ${b} + ${c} = ${a + b + c}`;
console.log(taggedResule); //"6 + 9 + 10 = 25"

function zipTag(strings, ...expressions) {
  return (
    strings[0] +
    expressions
      .map((expression, i) => {
        return `${expression}${strings[i + 1]}`;
      })
      .join("")
  );
}
var taggedResule = zipTag`${a} + ${b} = ${a + b}`;
console.log(taggedResule); //"6 + 9 = 15"