模板字符串中的 Javascript 条件答案

【问题标题】：Javascript conditional in template string模板字符串中的 Javascript 条件
【发布时间】：2019-04-19 22:39:00
【问题描述】：

有没有办法在模板字符串中做条件？

例如：

let x, y;

x = ...
y = ...

let templateString = `${x} ${y}`;

如果 y 未定义，我不希望在 x 之后输出模板字符串中的空格。我将如何使用模板字符串来实现？

这是唯一的方法吗？

 let templateString = `${x}${y ? ' ' + y : ''}`;

【问题讨论】：

let templateString = y ? `${x} ${y}` : `${x}`;
在这种情况下，您不妨将 ${x} 替换为 x，或 String(x) 强制它为字符串

标签： javascript template-strings

【解决方案1】：

更好

const templateString = `${x} ${y ?? ''}`.trim();

【讨论】：

感谢您提供这个简洁的解决方案
这很好，但是当问题中要求y 是undefined 时它不起作用。
更新条件@DavidLeal

【解决方案2】：

这个小例子可能有点过头了，但是标记模板函数提供了一个很好的通用解决方案，在保持模板字符串干净的同时提供了惊人的灵活性。例如，这里通常会删除未定义变量之前的文本：

function f(str ,...variables){
  return variables.reduce((res, v, i) => v ? res + str[i] + v: res, '')
}
let x, y, z;

x = "test"
y = "test2"

// both defined
console.log(f`${x} + ${y}`)

// only one:
console.log(f`${x} + ${z}`)

// random text:
console.log(f`${x} with ${z} and ${y}`)

由于它将所有内容都传递给函数，因此您几乎可以执行任何您想要的逻辑，同时仍然具有可读的字符串。在MDN Page on template literals 的中间有一些文档。

【讨论】：

@baklazan 函数被传递一个字符串数组str，它代表模板的文本部分和模板中变量的参数（存储在variables）。 reduce 通过测试变量是否为真来循环变量并构建字符串。如果是，则将相应的字符串和变量添加到返回的字符串中。

【解决方案3】：

你也可以在表达式中使用函数

这是一个例子

let x, y;

x = 'test'
y = undefined;

let templateString = `${x} ${y}`;

function fn(value1,value2) { return value2? (value1 + ' ' + value2) : value1 }
console.log('when undefined =',`${fn(x,y)}`);


x = 'test'
y = 'test1';

console.log('when not undefined = ',`${fn(x,y)}`);

reference

【讨论】：

很好，很高兴知道这种用于提取方法重构的方法。

【解决方案4】：

另一种使用嵌套模板文字的稍微简洁的方法。

`${x}${y ? ` ${y}` : ''}`

【讨论】：

【解决方案5】：

从技术上讲，您可以嵌套这些模板字符串，它并不漂亮，但可以这样做

let templateString = `${y ? `${x} ${y}`: `${x}`}`;

不过，我会使用第一条评论中的解决方案。

【讨论】：

很好，不知道。

【解决方案6】：

怎么样

let x,y;

const templateString = [x,y].filter(a => a).join(' ');

它首先将您的属性放入数组 [] 中的作用。

然后它过滤未定义的项目。

最后它通过使用join 和空格来创建数组的字符串。

这样x 或y 可以是未定义的。

【讨论】：

不错的功能方法

【解决方案7】：

如果不在模板中添加逻辑，看起来会更容易阅读：

let templateString = y ? `${x} ${y}` : `${x}`;

【讨论】：