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

Question

我注意到使用反引号时警报消息无法正确显示：

示例：

＆＃13;

＆＃13;

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);
});

＆＃13;

li{cursor: pointer;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

是否有更好的方法来正确显示警报反引号文本，而不是编写自定义函数来执行此操作？...我的意思是不执行以下操作：

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

Answer 1

请记住，反引号意味着文字，因此所有这些额外的空格都会添加到结果中。您可以删除这些空格或使用其他形式，例如引号+ \以使用多行。

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

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`);