如何在使用反引號時正確顯示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`);