当我的输入相同（“”）时，为什么有些字符串包含“ ”和一些“”？答案

【问题标题】：Why do some strings contain " " and some " ", when my input is the same(" ")?当我的输入相同（“”）时，为什么有些字符串包含“ ”和一些“”？
【发布时间】：2020-05-18 18:31:50
【问题描述】：

当我尝试在 p 元素中使用一些数据/字符串时，会出现我的问题。

我从这样的数据开始：

data: function() {
  return {
    reportText: {
      text1: "This is some subject text",
      text2: "This is the conclusion",
    }
  }
}

我在我的 (vue-)html 中使用这些数据如下：

<p> {{ reportText.text1 }} </p>
<p> {{ reportText.text2 }} </p>

在我的浏览器中，当我检查我的元素时，我会看到以下结果：

<p>This&nbsp;is&nbsp;some&nbsp;subject&nbsp;text</p>
<p>This is the conclusion</p>

正如你所看到的，突然之间出现了区别，一个 p 元素使用&nbsp;，另一个使用，尽管我开始两个字符串都只使用。我知道&nbsp; 和在技术上代表相同的事物，但&nbsp; 字符串的问题在于它被视为具有1 个大单词而不是多个单独单词的字符串。这搞砸了我的布局，我无法通过使用某些 css 属性（自动换行等）来解决这个问题

我尝试过的其他事情：

尝试使用 .replace(&nbsp;, ) 对字符串进行清理，但这无济于事。我认为这是因为它基本上是相同的，所以没有什么可以真正替代的。同样的原因，我必须在 stackoverflow 上使用块代码来确定 &nbsp; 和之间的界限。
从 vue 记录数据看是否有任何明显的差异，但我看不到任何差异。如果我记录数据/报告文本，我再次只能看到带有 's 的字符串

所以我有以下问题：

为什么会发生这种情况？我似乎找不到任何合乎逻辑的解释，为什么它有时使用，有时使用&nbsp;，这似乎是随机的，但我确信我错过了一些东西。
我还可以尝试按照我的字符串所采用的路径进行其他操作，以便查看从到&nbsp; 的转换发生在哪里？

【问题讨论】：

有时不间断空格是 unicode 字符而不是 HTML 实体，浏览器的检查器将其显示为 HTML 实体，尽管它存储为 unicode。我自己也遇到过同样的问题。查看this answer 并查看是否进行小修改（即使用' ' 代替''）可以解决您的问题。
这非常有效。我现在正在使用 {{ reportText.text1 | correctSpaces }}，其中 correctSpaces 是使用 reportText.text1 并应用 .replace(/[\\u00A0]/g. " ") 的过滤器。我仍然不明白为什么需要这样做，但至少我现在可以让它工作。您想提交一个正式的答案以便我接受，还是让我自己回答？
我一定会将此作为正确答案提交，并提供更深入的解释，以帮助缓解任何挥之不去的困惑。

标签： html string vue.js

【解决方案1】：

根据 cmets，设计的解决方案最终是针对 \u00A0 unicode 代码点的简单 unicode 字符替换（即用普通空格替换 unicode 不间断空格）：

str.replace(/[\\u00A0]/g, ' ')

解释：

JavaScript 通常允许以两种方式使用 unicode 字符：您可以直接输入呈现的字符，或者您可以使用 unicode 代码点（即在 JavaScript 的情况下，以 \u 为前缀的十六进制代码，如 @987654324 @)。它没有 HTML 实体的概念（即 & 和 ; 之间的字符序列，如 &nbsp;）。

然而，某些浏览器的检查器工具利用 HTML 实体的 HTML 概念，并且通常会在适用的情况下使用相应的 HTML 实体显示 Unicode 字符。如果您在 Chrome 的检查器与 Firefox 的检查器中检查相同的源代码（无论如何，在撰写此答案时），您将看到 Chrome 使用 HTML 实体，而 Firefox 使用呈现的字符结果。虽然能够在检查器中查看不可打印的 unicode 字符是一个方便的功能，但 Chrome 对 HTML 实体的使用只是一个方便的功能，而不是源代码实际内容的反映。

考虑到这一点，我们可以推断您的源代码包含完全呈现形式的 unicode 字符。无论您的 unicode 字符的形式如何，解决方法都是相同的：您需要明确定位这些 unicode 空格字符并用普通空格替换它们。

【讨论】：