|
一位群友在折腾ES6的模板字符串。
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
可以前往阮一峰的博客进一步了解它:
http://es6./#docs/string#模板字符串
不过这位群友发现无论如何输出多行模板字符串，都没有自动保留换行，而视频里是确实给模板字符串做了保留换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="msg1"></div>
<div id="msg2"></div>
</body>
</html>
<script>
//视频中的代码
var msg1 = document.querySelector("#msg1");
msg1. innerText = `
this
is
a
message`;
//这位群友的代码
var msg2 = document.querySelector("#msg2");
msg2.innerHTML = `
this
is
a
message`;
</script>
输出结果:
this
is
a
message
this is a message
很显然是这位群友没有用Node.innerText，所以模板字符串没有被自动换行。在很多人看来，Node.innerHTML与Node.innerText的区别在于是否会解析标记文本，但让人想不到的是，Node.innerText非常地与众不同。它能够把文本的缩进，回车，空格原封不动地还原出来，这是Node.innerHTML所做不到的。实际上，Node.innerText一开始并不属于HTML标准，直到近几年主流浏览器都对它做了自己的实现，在2016年的HTML标准中才得到正式的规定。
来自mozilla的MDN描述:
Node.innerText is a property that represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard. This feature was originally introduced by Internet Explorer, and was formally specified in the HTML standard in 2016 after being adopted by all major browser vendors.
这种原封不动在浏览器输出字符串的功效，必然是要归功于innerText属性的特性。
在jQuery的世界里，有html和text方法，它们和Node.innerHTML属性和Node.innerText类似。html方法是对Node.innerHTML的输出：
html: function( value ) {
return access( this, function( value ) {
var elem = this[ 0 ] || {},
i = 0,
l = this.length;
if ( value === undefined && elem.nodeType === 1 ) {
return elem.innerHTML;
}
// See if we can take a shortcut and just use innerHTML
if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
!wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
value = jQuery.htmlPrefilter( value );
try {
for ( ; i < l; i++ ) {
elem = this[ i ] || {};
// Remove element nodes and prevent memory leaks
if ( elem.nodeType === 1 ) {
jQuery.cleanData( getAll( elem, false ) );
elem.innerHTML = value;
}
}
elem = 0;
// If using innerHTML throws an exception, use the fallback method
} catch ( e ) {}
}
if ( elem ) {
this.empty().append( value );
}
}, null, value, arguments.length );
}
可以看到通过jQuery的html方法的语句，会调用Node.innerHTML实现输出。
而jQuery的text方法，并非使用了Node.innerText,而是通过Element.nodeType搜寻其中的文本节点，并通过Node.textContent进行输出。
text: function( value ) {
return access( this, function( value ) {
return value === undefined ?
jQuery.text( this ) :
this.empty().each( function() {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
this.textContent = value;
}
} );
}, null, value, arguments.length );
}
通过jQuery的text方法传出的字符串，与Node.innerText并不一致。这也是Node.innerText区别于Node.textContent的所在。
在MDN是这样描述的:
Node.textContent is a somewhat similar alternative, although there are important differences between the two.
这里有个实际的例子:
$("#msg3").text(`
this
is
a
message
`)
输出结果
this is a message
通过Node.textContent输出的字符串，并不会保留换行和缩进，而通过Node.innerText输出的字符串，原封不动地将它们输出到浏览器窗体。
|
