简介
Common-Tags 是一个实用的 JavaScript 库，可以帮助您更轻松地编写模板字面量。它提供了许多简单但有用的标记，可以让你在字符串中嵌入变量、格式化文本和保留空格等操作。
安装
使用 npm 进行安装：
npm i common-tags
基础用法
Common-Tags 提供了一系列函数来处理模板字面量，其中最常用的可能是 html、oneLine 和 stripIndent。
html
html 函数可用于构建 HTML 片段。它会自动转义所有 HTML 实体，以防止 XSS 攻击。
const { html } = require('common-tags');
const name = '<script>alert("XSS");</script>';
const testHtml = html`<div>Welcome, ${name}!</div>`;
console.log(testHtml); // <div>Welcome, <script>alert("XSS");</script>!</div>oneLine
oneLine 函数将多行文本合并为一行，去掉所有换行符和前导/尾随空格。
const { oneLine } = require('common-tags');
const testOneLine = oneLine`
This is a
multiline text.
`;
console.log(testOneLine); // This is a multiline text.stripIndent
stripIndent 函数将每一行的前导空格都去掉，以使文本更易于阅读。
-- -------------------- ---- -------
----- - ----------- - - -----------------------
----- --------------- - ------------
---- -- -
--------- ---- ----
-------
------------
--
-----------------------------
--
---- -- -
--------- ---- ----
-------
------------
--进阶用法
在一些情况下，这些基本的模板字面量函数可能无法满足我们的需求。但不用担心，Common-Tags 提供了更多高级的函数来扩展功能。
replaceResultTransformer
replaceResultTransformer 函数可用于在执行其他标记前对结果进行转换。例如，我们可以使用它将所有大写字母转换为小写字母。
const { oneLine, replaceResultTransformer } = require('common-tags');
const toLowerCase = replaceResultTransformer(str => str.toLowerCase());
const testReplaceResultTransformer = oneLine`
This is A Multiline Text.
`;
console.log(toLowerCase`${testReplaceResultTransformer}`); // this is a multiline text.inlineArrayTransformer
inlineArrayTransformer 函数可将数组中的元素连接成一个字符串，并删除所有换行符。
-- -------------------- ---- -------
----- - ----------------------- ----------- - - -----------------------
----- -------------------------- - ------------
---- -- -
--------- ---- ----
-- ------ ---------------------------- -- --- --- -- -----------
--- ---- ---- -----
--
---------------------------------------- -- ---- -- - --------- ---- ---- -- ------ ------ --- ---- ---- -----结论
Common-Tags 是一个非常实用的 JavaScript 库，可以帮助开发者轻松编写模板字面量。本文介绍了该库的基础和进阶用法，并提供了示例代码。如果您正在开发前端应用程序，建议您尝试使用 Common-Tags 来简化代码并提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49651