如何在使用反引号时正确显示JavaScript警报内的文本？

Question

我说，当我使用反引号警报消息不正确显示：

例子：

var classicMsg = "Lorem Ipsum is simply dummy text of the printing and typesetting " 
 
\t \t \t + "ndustry. Lorem Ipsum has been the industry's standard dummy " 
 
\t \t \t + "text ever since the 1500s, when an unknown printer took a galley " 
 
\t \t \t + "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(){ 
 
\t alert(backticksMsg); 
 
});

li{cursor: pointer;}

<ul> 
 
    <li id="btnAlert1">Test with classic message</li> 
 
    <li id="btnAlert2">Test with backticks message</li> 
 
</ul>

是否有更好的方法来正确显示警报反引号文字比写一个自定义函数来做到这一点？...我的意思是没有做这样的事情：

function formatTextBeforeCallingAlert(txt) { 
    return txt.replace(/\n/g, '').replace(/\t/g, ''); 
} 

Answer 1

请记住，反引号的意思字面，所以所有这些多余的空格被添加到结果。您可以删除这些空格或使用其他表单，如引号+ \以使用多行。

var classicMsg = "Lorem Ipsum is simply dummy text of the printing and typesetting " 
 
\t \t \t + "ndustry. Lorem Ipsum has been the industry's standard dummy " 
 
\t \t \t + "text ever since the 1500s, when an unknown printer took a galley " 
 
\t \t \t + "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(){ 
 
\t alert(backticksMsg); 
 
}); 
 

 
document.getElementById("btnAlert3").addEventListener('click', function(){ 
 
\t alert(breaklineMsg); 
 
});

li{cursor: pointer;}

<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>

Answer 2

这仅仅是一个使用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`);