バックトリックを使用しているときに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`);