common-tags 使用教程

common-tags 使用教程

common-tags 🔖 Useful template literal tags for dealing with strings in ES2015+ 项目地址: https://gitcode.com/gh_mirrors/co/common-tags

1. 项目介绍

common-tags 是一个基于 ES2015 的模板标签库，提供了一系列预定义的模板标签，用于处理字符串、格式化 HTML、以及处理其他常见的文本操作。这个库不仅支持基本的文本操作，还允许用户创建自定义的标签，满足更复杂的需求。它被设计为易于使用，同时保持了代码的整洁和可读性。

2. 项目快速启动

首先，确保您的环境中已经安装了 Node.js 版本 5.0.0 或更高。然后，通过以下命令安装 common-tags：

npm install common-tags

以下是一个简单的示例，演示如何使用 common-tags 中的 html 标签来创建 HTML 字符串：

import { html } from 'common-tags';

const fruits = [
  '苹果',
  '橙子',
  '西瓜'
];

const htmlString = html`
  <div class="水果列表">
    <ul>
      ${fruits.map(fruit => `<li>${fruit}</li>`)}
    </ul>
  </div>
`;

console.log(htmlString);

这段代码将输出一个格式化的 HTML 字符串，其中包含了一个无序列表，列出了所有的水果。

3. 应用案例和最佳实践

处理带缩进的 HTML

使用 stripIndent 标签可以自动处理模板字符串中的缩进，使得 HTML 代码更加整洁：

import { stripIndent } from 'common-tags';

const htmlString = stripIndent`
  <div class="容器">
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
  </div>
`;

console.log(htmlString);

防止 XSS 攻击

使用 safeHtml 标签可以对模板中的变量进行转义，以防止 XSS 攻击：

import { html, safeHtml } from 'common-tags';

const unsafeString = `<script>alert('XSS')</script>`;
const safeString = safeHtml`${unsafeString}`;

console.log(safeString); // 输出时会对 <script> 标签进行转义

4. 典型生态项目

common-tags 被广泛应用于许多项目中，以下是一些典型的使用案例：

• Slack: 使用 common-tags 来格式化消息模板。
• CircleCI: 在构建过程中使用 common-tags 处理文本。
• Ember.js: 利用 common-tags 来创建复杂的 HTML 模板。
• Prettier: 使用 common-tags 来格式化代码和文档。

这些项目都利用了 common-tags 提供的强大功能，以保持代码的整洁和可维护性。

common-tags 🔖 Useful template literal tags for dealing with strings in ES2015+ 项目地址: https://gitcode.com/gh_mirrors/co/common-tags