如何在 JavaScript 中创建具有多个空格的字符串答案

【问题标题】：How to create string with multiple spaces in JavaScript如何在 JavaScript 中创建具有多个空格的字符串
【发布时间】：2015-11-05 08:32:37
【问题描述】：

通过创建变量

var a = 'something' + '        ' + 'something'

我得到这个值：'something something'。

如何在 JavaScript 中创建一个带有多个空格的字符串？

【问题讨论】：

对每个` `空格使用\xa0代码

标签： javascript html whitespace space html-entities

【解决方案1】：

2022 年 - 使用 ES6 Template Literals 完成此任务。如果你需要IE11 Support - 使用transpiler。

let a = `something       something`;

模板文字速度快、功能强大，并且可以生成更简洁的代码。

如果您需要 IE11 支持并且没有transpiler，请保持强大? 并使用\xa0 - 这是一个NO-BREAK SPACE 字符。

来自UTF-8 encoding table and Unicode characters的参考，可以这样写：

var a = 'something' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'something';

【讨论】：

不错！当您将其添加到 html 元素时，jQuery 将 \xa0 转换为
谢谢。这有助于在其他地方输入的舞蹈风格周围填充弯曲的跨度： $('#DanceStyle').text("\xa0\xa0\xa0\xa0" + $('#Dances_Moderated_DanceStyle').val() + "\ xa0\xa0\xa0\xa0")

【解决方案2】：

使用&nbsp;

它是用于表示不间断空间的实体。它本质上是一个标准空间，主要区别在于浏览器不应在 this 占据的位置中断（或换行）一行文本。

var a = 'something' + '&nbsp &nbsp &nbsp &nbsp &nbsp' + 'something'

不间断空格

HTML 中常用的字符实体是不间断空格 ( )。

请记住，浏览器总是会截断 HTML 页面中的空格。如果你写10个空格您的文本，浏览器将删除其中的 9 个。要在文本中添加真实空格，您可以使用角色实体。

http://www.w3schools.com/html/html_entities.asp

演示

var a = 'something' + '&nbsp &nbsp &nbsp &nbsp &nbsp' + 'something';

document.body.innerHTML = a;

【讨论】：

【解决方案3】：

var a = 'something' + Array(10).fill('\xa0').join('') + 'something'

Array(10)中的数字可以更改为所需的空格数

【讨论】：

【解决方案4】：

使用模板文字，您可以使用多个空格或多行字符串和字符串插值。 Template Literals 是一个新的 ES2015 / ES6 功能，允许您使用字符串。语法很简单，用反引号代替单引号或双引号即可：

let a = `something                 something`;

要制作多行字符串，只需按 Enter 创建一个新行，没有特殊字符：

let a = `something 

    
                         something`;

结果和你在字符串中写的完全一样。

【讨论】：

【解决方案5】：

您可以将<pre> 标记与innerHTML 一起使用。 HTML <pre> 元素表示要完全按照 HTML 文件中的内容呈现的预格式化文本。文本通常使用非比例（“等宽”）字体呈现。此元素内的空格显示为已写入。如果您不想要不同的字体，只需在 CSS 文件中添加 pre 作为选择器并根据需要设置样式。

例如：

var a = '<pre>something        something</pre>';
document.body.innerHTML = a;

【讨论】：

【解决方案6】：

字符串变量本身没有这个问题，只是字符串转换成html的时候才有这个问题。

可以使用replace 和正则表达式将空格转换为受保护的空格replace(/ /g, '\xa0')。

var a = 'something' + '        ' + 'something'

p1.innerHTML = a
p2.innerHTML = a.replace(/ /g, '\xa0')

<p id="p1"></p>
<p id="p2"></p>

顺便说一句，如果您在contenteditable 中输入了许多空格，它们将被转换为空格和受保护空格的交替序列，您可以在这里尝试：

<p contenteditable onkeyup="result.value = this.innerHTML">put many space into this editable paragraph and see the results in the textarea</p>

<textarea id="result"></textarea>

【讨论】：