当我们在进行前端开发时，常常需要对一些 HTML 模板字符串进行处理。如果我们使用传统的方式手写字符串，容易出现格式混乱、嵌套层数过多、可维护性低等问题。而使用 theredoc 这个 npm 包可以让我们更加便捷地编写 HTML 模板字符串，提高代码质量和可读性。
什么是 theredoc
theredoc 是一个简单的 npm 包，它提供了一种方便的方式来编写多行字符串。与传统的字符串不同，theredoc 可以将代码中的多行字符串缩进忽略，并且支持占位符、变量插值等功能。使用 theredoc 可以让我们更加方便地编写 HTML 模板字符串。
安装和基本用法
安装 theredoc 非常简单，只需要使用 npm 或 yarn 进行安装即可：
npm install theredoc # 或者使用 yarn 安装 yarn add theredoc
使用 theredoc 的基本语法如下：
-- -------------------- ---- -------
----- ---- - ---------
--------- -----
------
------
-----------------------
-------
------
-------------------
-----------------
-------
-------
--在上面的代码中，我们使用了 theredoc 模板字符串编写了一个简单的 HTML 页面。在模板字符串中，我们可以使用 ${variable} 的方式插入变量，实现了变量插值的功能。
详细用法示例
下面我们来看一些更加详细的使用示例。
多行字符串和缩进
与传统的字符串不同，theredoc 可以处理多行字符串，并且会忽略代码中的缩进。比如下面这个示例：
-- -------------------- ---- -------
----- ---- - ---------
------
------
-----------------------
-------
------
-------------------
-----------------
-------
-------
--在这个示例中，我们使用了多行字符串编写了一个简单的 HTML 页面。与传统的字符串不同，这里的代码中包含了多行字符串，并且使用了缩进。theredoc 会自动忽略掉代码中的缩进，以保证最终生成的字符串的格式正确。
占位符和变量插值
除了支持多行字符串和缩进之外，theredoc 还支持占位符和变量插值。比如下面这个示例：
const name = "John";
const age = 30;
const html = theredoc`
<div>
<span>My name is ${name}.</span>
<span>I am ${age} years old.</span>
</div>
`;在这个示例中，我们使用了占位符和变量插值来构造一个包含变量的 HTML 页面。与传统的字符串不同，这里的代码中包含了占位符 ${name} 和 ${age}，并且这些占位符会被自动替换成变量的值。
嵌套模板字符串
在实际的开发中，我们常常需要嵌套多个模板字符串来构造复杂的 HTML 页面。比如下面这个示例：
-- -------------------- ---- -------
----- ----- - -
- ----- ----- --- ------ -- --
- ----- ----- --- ------ -- --
- ----- ----- --- ------ -- --
--
----- ---- - ---------
----
------------------ -- ---------
----
-------------------------
--------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------