"\n" 在 JavaScript 中被视为字符串文字

Question

我有一个 select 标签，其选项标签的值为“\n”。当该选项被 selected 并且我使用 jQuery 获取值时，JavaScript 似乎将其视为字符串文字而不是将其解释为换行符。

我试过转义、取消转义、转义然后取消转义，使用 jQuery htmlEncoding 技术、jQuery htmlDecoding 技术，甚至尝试与空字符串连接。我正在拔头发。原来如此简单

至少有 5 种变通方法几乎立即出现在我的脑海中，它们的优雅程度各不相同，但在这一点上，我更感兴趣的是为什么会存在这种行为。我缺少什么简单的东西吗？我真正的问题是 "why does JavaScript treat a string of \n one way in one context, but differently in another"，而不是 "how do I just get it to work"。

这是代码

Html

<select id="delimiter">
  <option value="\n">New Line</option> <!--This should produce a linefeed-->
  <option value=",">, (Comma)</option>
  <option value=";">; (Semicolon)</option>
  <option value="\t">Tab</option>
</select>
<button  onclick="doit()">
  Check It
</button>

JavaScript

function doit(){
  var delimiter = $("#delimiter").val();

  console.debug("\n"); //produces an actual linefeed character
  console.debug(delimiter); //this produces the string "\n"
}

我这里有它的代码笔： https://codepen.io/codysechelski/pen/MoJKMB?editors=1111

Answer 1

用换行代码替换您的值中的“\n”："" 在 HTML 标签属性中，您必须使用 HTML character entity 作为特殊字符。

Answer 2

Why does JavaScript treat a string of \n one way in one context, but differently in another?

因为它不是 JavaScript，也不是字符串文字。 <option value="\n"> 是普通的 HTML，反斜杠不是 HTML 中的转义字符。您可以改用文字换行符或 character entity。

I have tried escaping…

但显然不是正确的。它总是取决于使用哪个转义的上下文，有时你甚至需要将它们链接起来。一些合适的解决方案：

HTML 来源中的文字字符：

<option value="
">New Line</option>
<option value=",">Comma</option>
<option value=" ">Tab</option>

selectEl.value

HTML 源中的字符实体引用，以避免奇怪的格式：

<option value="&#x000A;">New Line</option> <!-- or &#10; -->
<option value=",">Comma</option>
<option value="&#x0009;">Tab</option> <!-- or &#9; -->

selectEl.value

JSON HTML 源中的文字以避免知道字符代码：

<option value="&quot;\n&quot;">New Line</option>
<option value="&quot;,&quot;">Comma</option>
<option value="&quot;\t&quot;">Tab</option>

JSON.parse(selectEl.value)

JSON HTML 源中的字符串内容：

<option value="\n">New Line</option>
<option value=",">Comma</option>
<option value="\t">Tab</option>

JSON.parse('"'+selectEl.value+'"')

Answer 3

"why does JavaScript treat a string of \n one way in one context, but differently in another"

首先你应该明白，字符串字面量并不是内存中的实际字符串，而是js语法的一部分，用于创建字符串。因此，以“\”字符开头的转义序列向 js 引擎发出信号，以不同的方式处理下一个字符。

HTML 没有这种特殊的语法。所以“\”就是“\”，“\n”就是“\n”。当这个字符串通过 DOM API（这不是 js 语法的一部分）跨越 html-js 边界时，它仍然是 "same" 两个字母的字符串。

顺便说一下，在 js 中有不同的编码新行的方法，在内存中产生相同的字符串

const withEscSequence = '\n'

// es2015
const usingStringTemplate = `
`
// directly from char code
const fromCharCode = String.fromCharCode(10)

// using unicode escape sequence
const unicodeEscSequence = '\u000A'

// using hex escape sequence
const hexEscSequence = '\x0A'


console.log(withEscSequence === usingStringTemplate, withEscSequence === fromCharCode, withEscSequence === unicodeEscSequence, withEscSequence ===  hexEscSequence)

"\n" 在 JavaScript 中被视为字符串文字

"\n" being treated as a string literal in JavaScript

javascript

jquery

linefeed

Html

JavaScript