Javascript 模板字符串中的条件
Javascript conditional in template string
有没有办法在模板字符串中进行条件处理?
例如:
let x, y;
x = ...
y = ...
let templateString = `${x} ${y}`;
如果y未定义,我不希望在x之后的模板字符串中输出space。我如何使用模板字符串实现它?
这是唯一的方法吗?
let templateString = `${x}${y ? ' ' + y : ''}`;
那
呢
let x,y;
const templateString = [x,y].filter(a => a).join(' ');
它的作用是首先将您的属性放入数组 []。
然后过滤未定义的项目。
最后它通过使用 join
和 space 创建数组的字符串。
这样 x
或 y
可以是未定义的。
如果不在模板中添加逻辑,看起来更容易阅读:
let templateString = y ? `${x} ${y}` : `${x}`;
从技术上讲,您可以嵌套这些模板字符串,虽然不是很漂亮,但这是可行的
let templateString = `${y ? `${x} ${y}`: `${x}`}`;
虽然我会使用第一条评论中的解决方案。
另一种使用嵌套模板文字的稍微简洁的方法。
`${x}${y ? ` ${y}` : ''}`
你也可以在表达式中使用函数
这是一个例子
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)}`);
对于这个小例子来说可能有些矫枉过正,但是标记的模板函数提供了一个很好的通用解决方案,它允许惊人的灵活性,同时保持模板字符串干净。例如,这里有一个通常会删除未定义变量之前的文本的方法:
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.
中途有一些文档
更好
const templateString = `${x} ${y ?? ''}`.trim();
有没有办法在模板字符串中进行条件处理?
例如:
let x, y;
x = ...
y = ...
let templateString = `${x} ${y}`;
如果y未定义,我不希望在x之后的模板字符串中输出space。我如何使用模板字符串实现它?
这是唯一的方法吗?
let templateString = `${x}${y ? ' ' + y : ''}`;
那
呢let x,y;
const templateString = [x,y].filter(a => a).join(' ');
它的作用是首先将您的属性放入数组 []。
然后过滤未定义的项目。
最后它通过使用 join
和 space 创建数组的字符串。
这样 x
或 y
可以是未定义的。
如果不在模板中添加逻辑,看起来更容易阅读:
let templateString = y ? `${x} ${y}` : `${x}`;
从技术上讲,您可以嵌套这些模板字符串,虽然不是很漂亮,但这是可行的
let templateString = `${y ? `${x} ${y}`: `${x}`}`;
虽然我会使用第一条评论中的解决方案。
另一种使用嵌套模板文字的稍微简洁的方法。
`${x}${y ? ` ${y}` : ''}`
你也可以在表达式中使用函数
这是一个例子
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)}`);
对于这个小例子来说可能有些矫枉过正,但是标记的模板函数提供了一个很好的通用解决方案,它允许惊人的灵活性,同时保持模板字符串干净。例如,这里有一个通常会删除未定义变量之前的文本的方法:
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.
中途有一些文档更好
const templateString = `${x} ${y ?? ''}`.trim();