Question

我想知道在模板文字中使用表达式的最佳方法是什么。以下代码可以正常运行

var val1 = "Hello"
var val2 = "world"

var template = `${val1} ${val2}!`
console.log(template)

但是可以说由于某种原因没有val2

var val1 = "Hello"


var template = `${val1} ${val2}!`
console.log(template)

在这种情况下，它将引发如下错误

var template = ${val1} ${val2}! ^ ReferenceError：未定义val2

有没有一种方法可以定义默认值或其他值，从而不会引发错误？

Answer 1

永远不要让变量保持未声明状态。而是使用一个对象，并在需要动态道具时在其上查找属性：

 const context = { val1: "hello" };
 // context.val2 = "world";
 var template = `${context.val1} ${context.val2}!`

如果需要其他操作，将导致Hello undefined!，请使用||运算符：

 var template = `${context.val1} ${context.val2 || "world"}!`;

Answer 2

我不这么认为；此代码将始终引发该错误：

var val1 = "Hello"
var template = `${val1} ${val2}!`

console.log(template)

您能为我们提供用例的更具体示例吗？我假设这在期望null或undefined值的函数内部。如果发生这种情况，则可能有效：

function makeAString(val1 = '', val2 = '', val3 = '') {
   var template = `${val1} ${val2}!`
   console.log(template);
}

makeAString("Hello");
//logs "Hello !"

如果您不喜欢空白空间，并且想要更可重复使用的东西，可以这样做：

function makeAString(vals = {}) {
  return Object.getOwnPropertyNames(vals)
    .filter(prop => !!vals[prop])
    .reduce((template, prop) => `${template} ${vals[prop]}`, "")
    .trim()
    .concat("!");
}

let stringValue = makeAString({
  val1: "Hello",
  otherValue: null,
  undefinedValue: undefined,
  val3: "there",
  val4: "Friend"
});
console.log(stringValue);

//logs "Hello there Friend!"

可能有更好的方法，但这是我想到的第一件事。

如何处理模板文字中缺少的嵌入式表达式

2 个答案: