正确嵌套三元运算符

Question

我正在使用框架显示带有动物的表格，这限制了我使用单个三元运算符来显示和格式化我的文本，想法是这样的：如果对象包含 animalType、animalType.name 和 animalType.id，那么检查由 name + id 组成的字符串是否长于 10 个字符，截断文本，否则如果它小于 10，则显示整个文本，如果它们不存在，则显示一个空标题，这就是我的写法使用常规 if else 语句：

if(animalType && animalType.name && animalType.id) {
  if ((animalType.name + animalType.id).length > 10) {
    return animalType.name + animalType.id.slice(0, 10) + '......'
  } else if ((animalType.name + animalType.id).length < 10) {
    return animalType.name + animalType.id
  }
} else {
  return ''
}

通过阅读 mdn 网络文档，我了解到可以通过多个条件：

condition1 ? value1 : condition2 ? value2

这是我使用三元运算符的尝试：

animalType && animalType.name && animalType.id
  ? (animalType.name + animalType.id).length > 10
  : (animalType.name && animalType.id).slice(0, 10)
  : (animalType.name + animalType.id).length < 10
  ? animalType.name && animalType.id
  : ''

但是我不知道如何包装三元运算符，以便它在评估名称和 id 是否存在后开始检查，就像在常规 if else 语句中所做的那样，我该如何编写相同的逻辑使用三元运算符？

Answer 1

只需遵循这种括号方式，您可能需要调整逻辑，以便您的下一个条件始终遵循: 并且您必须准确地了解括号，在您的问题中甚至有未闭合的括号！如果您需要这样，请使用突出显示开始和结束括号的文本编辑器

condition ? value : (condition ? value : (condition ? value : (and ? so : on) ))

如果没有这个明确的括号，我的经验是它可能会失败。

在 javascript 中，您还应该能够将您的逻辑包装到一个函数中，并且无论您想放置三元组的任何位置，只需放置 function()

Answer 2

我会这样写你的案例，这样我就不会写上千遍animalType：

if(conditionA) {
    if(conditionB) {
        return value1
    } else if (conditionC) {
        return value2
    }
} else {
    return value3
}

你可以像这样使用三元运算符：

return conditionA
    ? conditionB
        ? value1
        : conditionC
            ? value2
            : undefined
    : value3