js标签模板

August 9, 2022

标签模板结构

function tag(...args) {
    console.log(JSON.stringify(args, null, 4));
}

tag`Hello`; // => [["Hello"]]
tag`Hello, world!`; // [["Hello, world!"]]
tag`Hello, ${"world"}!`; // [["Hello, ", "!"], "world"]
tag`left ${123} right`; // [["left ", " right"], 123]
tag`one${1}two${2}tree${3}`; // [["one", "two", "tree", ""], 1, 2, 3]
tag`obj${{}}arr${[]}`; // [["obj", "arr", ""], {}, []]

标签模板使用

通用形式

interface TemplateStringsArray extends ReadonlyArray<string> {
    readonly raw: readonly string[];
}

function tag(strings: TemplateStringsArray, ...data: string[]) {
    console.log(strings);
    console.log(data);
}

通过观察可以发现，strings.length === data.length + 1 必然成立

←Back to home