当前位置：首页 > 文章列表 > 文章 > 前端 > 模板字符串如何添加空格和换行

模板字符串如何添加空格和换行

2025-08-30 12:00:45 0浏览收藏

本篇文章给大家分享《在模板字符串中使用空格非常简单，只需直接输入空格即可。模板字符串是用反引号（``）包裹的字符串，可以在其中自由添加空格、换行符和其他字符。示例：let text = `这是一个带有换行和空格的模板字符串`; console.log(text);输出结果：这是一个带有换行和空格的模板字符串在 HTML 中使用模板字符串：

注意事项：模板字符串会保留所有的空格和换行。如果你想在字符串中使用反引号（`），需要进行转义：\。在 JavaScript 中，模板字符串非常适合构建动态内容或多行文本。如果你有特定的使用场景（比如 HTML、CSS 或其他语言），可以告诉我，我可以提供更具体的示例。》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

如何在模板字符串中使用空格？

本文旨在解决在 JavaScript 模板字符串中插入空格的问题。通过介绍 \u00A0 (不间断空格) 和 \u0020 (普通空格) 的 Unicode 表示，提供在模板字符串中灵活控制空格的方法，确保输出文本的格式符合预期。

JavaScript 的模板字符串（Template Literals）提供了一种方便的方式来嵌入表达式和变量到字符串中。然而，在某些情况下，你可能需要在模板字符串中精确控制空格的显示，例如在格式化输出或创建用户界面元素时。本文将介绍如何在模板字符串中使用空格，包括普通空格和不间断空格。

使用 Unicode 编码插入空格

在模板字符串中，你可以使用 Unicode 编码来插入不同类型的空格。

普通空格 (\u0020): 这是最常见的空格，与键盘上的空格键产生的效果相同。
不间断空格 (\u00A0): 不间断空格可以防止文本在空格处断行，常用于确保两个单词或元素始终显示在同一行。在 HTML 中，它通常用于创建额外的空格，因为多个连续的普通空格会被浏览器折叠成一个。

示例

假设你有一个包含物品数量的数组，你想使用模板字符串创建一个包含数量和物品名称的列表项。

const galleyCartsDet = [
  { quantity: 2 },
  { quantity: 1 },
  { quantity: 3 },
  { quantity: 4 }
];

const listItem = `
<li className='floatLeft'>
  <span><b>Galley Details</b></span>
  <br/>
  ${galleyCartsDet[0].quantity}\u00A0Full Cart\u00A0
  ${galleyCartsDet[1].quantity}\u00A0Half Cart\u00A0
  ${galleyCartsDet[2].quantity}\u00A0SMU\u00A0
  ${galleyCartsDet[3].quantity}\u00A0Stowage
</li>
`;

console.log(listItem);

在这个例子中，\u00A0 被用来在数量和物品名称之间插入不间断空格，确保它们始终显示在同一行，并且不会因为浏览器折叠空格而失去格式。

使用普通空格

如果只需要简单的空格，可以直接在模板字符串中使用空格字符，或者使用 \u0020。

const name = "John";
const greeting = `Hello\u0020${name}!`; // 等同于 `Hello ${name}!`
console.log(greeting); // 输出: Hello John!

注意事项

HTML 上下文: 在 HTML 中，多个连续的普通空格会被浏览器折叠成一个。如果需要多个连续的空格，应该使用多个 \u00A0 或 CSS 样式。
不同环境的兼容性: 虽然 Unicode 编码在大多数环境中都能正常工作，但在某些特殊情况下，可能会出现显示问题。建议在不同的浏览器和设备上进行测试，以确保空格的显示效果符合预期。
CSS 控制: 更灵活的空格控制可以通过 CSS 实现，例如使用 white-space 属性来控制空白符的处理方式。