我注意到使用反引号时警报消息无法正确显示:
示例:
var classicMsg = "Lorem Ipsum is simply dummy text of the printing and typesetting "
+ "ndustry. Lorem Ipsum has been the industry's standard dummy "
+ "text ever since the 1500s, when an unknown printer took a galley "
+ "of type and scrambled it to make a type specimen book.";
var backticksMsg = `Lorem Ipsum is simply dummy text of the printing and typesetting
ndustry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.`;
document.getElementById("btnAlert1").addEventListener('click', function(){
alert(classicMsg);
});
document.getElementById("btnAlert2").addEventListener('click', function(){
alert(backticksMsg);
});

li{cursor: pointer;}

<ul>
<li id="btnAlert1">Test with classic message</li>
<li id="btnAlert2">Test with backticks message</li>
</ul>
&#13;
是否有更好的方法来正确显示警报反引号文本,而不是编写自定义函数来执行此操作?...我的意思是不执行以下操作:
function formatTextBeforeCallingAlert(txt) {
return txt.replace(/\n/g, '').replace(/\t/g, '');
}
答案 0 :(得分:2)
请记住,反引号意味着文字,因此所有这些额外的空格都会添加到结果中。您可以删除这些空格或使用其他形式,例如引号+ \以使用多行。
var classicMsg = "Lorem Ipsum is simply dummy text of the printing and typesetting "
+ "ndustry. Lorem Ipsum has been the industry's standard dummy "
+ "text ever since the 1500s, when an unknown printer took a galley "
+ "of type and scrambled it to make a type specimen book.";
var backticksMsg = `Lorem Ipsum is simply dummy text of the printing and typesetting ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`;
var breaklineMsg = "Lorem Ipsum is simply dummy text of the printing\
and typesetting ndustry. Lorem Ipsum has been the industry's standard\
dummy text ever since the 1500s, when an unknown printer took a galley\
of type and scrambled it to make a type specimen book.";
document.getElementById("btnAlert1").addEventListener('click', function(){
alert(classicMsg);
});
document.getElementById("btnAlert2").addEventListener('click', function(){
alert(backticksMsg);
});
document.getElementById("btnAlert3").addEventListener('click', function(){
alert(breaklineMsg);
});
&#13;
li{cursor: pointer;}
&#13;
<ul>
<li id="btnAlert1">Test with classic message</li>
<li id="btnAlert2">Test with backticks message</li>
<li id="btnAlert2">Test with breakline \ message</li>
</ul>
&#13;
答案 1 :(得分:1)
这只是一种使用formatTextBeforeCallingAlert
功能的方式。
您可以使用标记的模板文字,以便在创建字符串时删除不需要的空格,而不是在输出字符串时。
演示:
function whitespace(strings, ...keys) {
return strings
//keys[i] will be undefined in the last call
.map((current, i) => current + (keys[i] || ''))
.join('')
//remove newlines, tabs, and replace multiple spaces with one space
.replace(/\r?\n|\t| +(?= )/g, '');
}
var a = "a";
var b = "b";
// Basic, no change unless necessary
console.log(whitespace`Test string: ${a}, ${b}`);
// Removes newlines
console.log(whitespace`Test
Newlines
Here
${a}`);
// Collapses multiple spaces
console.log(whitespace`Test spaces`);