如何在JavaScript字符串字面量中编写条件判断处理多变量输出？

1. 基础内联三元表达式 #

针对每个变量，直接在模板字符串的占位符里写三元判断即可满足需求：

let name = null
let age = 20
// 其余18个变量同理定义

let str = `
  name: ${name === null ? null : `"${name}"`},
  age: ${age === null ? null : `"${age}"`},
  // 把剩下的变量按同样格式补充进来
`

console.log(str)
// 输出结果：
//   name: null,
//   age: "20",

2. 内联箭头函数复用逻辑 #

因为有20个变量，重复写三元表达式太繁琐，可以在模板字符串里直接用箭头函数封装判断逻辑，每次调用即可：

let name = null
let age = 20
let email = "user@example.com"
// 其他变量...

let str = `
  name: ${v => v === null ? 'null' : `"${v}"`}(name),
  age: ${v => v === null ? 'null' : `"${v}"`}(age),
  email: ${v => v === null ? 'null' : `"${v}"`}(email),
  // 剩余变量按这个格式调用就行
`

console.log(str)
// 输出结果：
//   name: null,
//   age: "20",
//   email: "user@example.com",

3. 提前定义处理函数（更简洁的复用） #

如果允许在外部定义一个极简的处理函数（仅封装逻辑，不会额外做外部比较），代码会更清爽，且依然是在模板字符串内直接使用：

const formatValue = v => v === null ? 'null' : `"${v}"`

let name = null
let age = 20
// 其他变量...

let str = `
  name: ${formatValue(name)},
  age: ${formatValue(age)},
  // 剩下的变量直接调用formatValue即可
`

console.log(str)

注意点 #

• 当变量是null时，模板字符串会自动把null转为字符串null（不带引号），符合需求；有值时用双引号包裹，外层用反引号的情况下，内部双引号不需要转义。
• 三种方法都不需要在模板字符串外部单独做变量比较，所有判断逻辑都直接关联到模板字符串的占位符处理中。

内容的提问来源于stack exchange，提问作者sravan ganji