Chrome Javascript 控制台中带有空格的奇怪字符串行为答案

【问题标题】：Strange String Behaviour with Spaces in Chrome Javascript ConsoleChrome Javascript 控制台中带有空格的奇怪字符串行为
【发布时间】：2023-03-12 06:01:01
【问题描述】：

我无法在 SO sn-p 引擎中重新创建此行为，但我在 Chrome (v46) 中遇到了一些非常时髦的字符串操作行为。

看看这个 Chrome JavaScript 控制台的屏幕截图：

在我看来，切片的结果应该是( Here。也就是说，一个括号，然后是三个空格。不是括号，然后是一个空格，这是它目前提供给我的。

我在 Firefox 中检查了完全相同的命令，得到了我期望的结果：

谁能想到输出差异的解释？我是不是很密集？

更新

关于这是 this 的重复，我相信这个问题有两件不同的事情：

查询更清晰
它询问为什么会出现这种现象，而不是如何解决问题

【问题讨论】：

我认为这可能是一个错误。最简单的复现方法是输入'"( Here'。控制台会回复：""( Here"（我的第一个 sn-p 有 3 个空格，但渲染为只有一个）
如果你从 chrome js 控制台复制结果并粘贴，你会看到空格会在那里。 X)
你是对的@JoelRamosMichaliszen，你能详细说明为什么吗？这使调试变得困难。
可能是控制台中的 CR LF 之类的东西，我不太清楚，但很好奇，我会找到答案 X)
How to repeat whitespace的可能重复

标签： javascript string google-chrome

【解决方案1】：

实际上没有问题。即使我尝试使用 Chrome v46，这些空格也会在 devtools 中合并，这意味着输出/视图看起来只有一个空格，但实际上存在 3 个空格字符。检查下面的快照。

【讨论】：

【解决方案2】：

不要自欺欺人：Chrome 的行为是正确的。只是调试控制台中使用的字体使连续的空白看起来更薄。你可以通过检查string.slice(1).length来证明它。

【讨论】：

【解决方案3】：

这只是一个 DevTools 问题，很可能已通过以下补丁 http://src.chromium.org/viewvc/blink?view=revision&revision=201091 得到解决

这是关于折叠多个白色字符，因为 HTML 渲染是默认完成的。提到的补丁强制使用white-space: pre进行渲染。

【讨论】：

我喜欢这个答案 (+1)，因为它提供了解释。但我仍然不明白为什么控制台输出采用内联 HTML 渲染中的折叠空格。毕竟，如果我在控制台中输入"<div style="width:10px, height:10px; background-color:green;"></div>"，它不会给我一个绿色方块。
好吧，我没有检查 DevTools 的源代码，但我假设提供的文本被转换为文本节点，所以和其他 HTML 特殊字符被视为纯文本，这被插入到 DevTools 的文档结构中。所以，HTML 渲染仍然适用，只有特殊字符被“转义”。
抱歉，我觉得我说的不是很清楚，我的最后一条评论被打断了。我知道 HTML 中的多个空格会折叠。但我不明白为什么这会影响控制台输出。就我而言，控制台不应该模仿 HTML 呈现行为。控制台可能正在使用 TextNode 来显示，但这并不意味着这在技术上不是 Chrome 中的错误。我无法想象这会是调试控制台中的预期行为。
我从来没有说过这不是一个错误。这是一个错误，也许更多是可用性错误，因为 DevTools 对开发人员变得不那么可用了。该错误已得到解决。另一个事实是 Chrome 中的 DevTools 是使用 HTML+CSS+JS+ 可能是一些暴露给 JS 的内部东西构建的，所以这个错误的根本原因是，该功能的作者没有使用 white-space: pre 应用渲染规则.
我认为我们达成了一致。 :-)

【解决方案4】：

我遇到了类似的问题，但值来自文本框/输入。此错误不仅出现在控制台中，还出现在 Win10 上的 Chrome、Edge 和 Opera 以及 iOS 12、iOS 15 和 Android Chrome 上的浏览器中。但是，FireFox 控制台和浏览器仍会准确显示空格，并允许您修剪值以修复它。这似乎是 Chrome 的 javascript 引擎的一个错误。在下面的示例中，我试图修剪他们在文本框/输入中输入的用户输入数据。只有 Firefox 可以看到并让我修剪文本字符串的前导和尾随空格，并在底部示例中让代码更新 UI。运行此代码并输入 5 个空格，然后输入 5 个字母 a，再输入 5 个空格：

<input id="textbox" type="email" 
  onblur="alert('|' + this.value + ' & ' + this.value.trim() + '|')">

只有 FireFox 会显示警报中的空格。如果您像操作一样通过 document.getElementById('textbox').value 在控制台中手动获取值，则相同。

当 onblur 如下并在 FireFox 中工作时，我发现了这个错误：

onblur="this.value = this.value.trim();"

更新：我发现了“错误”。 Chrome 引擎和 iOS 引擎注意到输入是 type="email"，因此它会自动为您修剪前导和尾随空格，但仅当您通过 JavaScript 与之交互时。但是，所有这些浏览器都不会刷新 UI，也不允许您这样做，除非您首先更改来自 say 的值

" a@aa.com "

到 "b" 然后到 "a@aa.com"。因此，以下修复了它，使其现在可以在所有主要浏览器中按预期工作：

<input id="email" type="email" 
onblur="let x = this.value; 
  this.value = ''; 
  this.value = x.trim();">

这是一个烦人且丑陋的错误。希望这里有人可以建议更清洁的修复/解决方法。

【讨论】：