javascript - 通过返回三个值的任意组合来避免长 if/else 语句？

Question

我正在编写一个 Vue 过滤器函数作为字符串助手，遇到了一个有趣的问题。我觉得好像必须有一个更简单的解决方案，但我无法在 SO 中提出一个或找到类似的问题。

该函数传入一个用户对象，该对象可以包含 city、state 和 country 值。这是它目前的样子:

Vue.filter('userLocation', function(user) {
  const { city, state } = user;
  if (city && state) {
    return `${city}, ${state}`;
  } else if (!city && state) {
    return `${state}`;
  } else if (city && !state) {
    return `${city}`;
  } else {
    return 'Please update your location settings!';
  }
});

目前这个函数只返回城市和州的值，并且已经很丑陋了，但是现在我想添加国家以及这只会使它变得更加复杂。

本质上，我希望函数返回这三个值的任意组合。因此，如果不包括国家/地区，请返回城市和州。如果不包括州，则返回城市和国家等。是否有更好的(可能是 ES6)解决方案来解决所有情况，而不是编写那么多 if/else 条件？

Answer 1

您可以使用一些技巧，但是一旦您达到这样的三个项目，我可能会使用数组:

Vue.filter('userLocation', function(user) {
  const { city, state, country } = user;
  return [city, state, country].filter(Boolean).join(", ") || 'Please update your location settings!';
});

或

Vue.filter('userLocation', function(user) {
  return [user.city, user.state, user.country].filter(Boolean).join(", ") || 'Please update your location settings!';
});

string-from-user 位的实例:

function example(user) {
    return [user.city, user.state, user.country].filter(Boolean).join(", ") || 'Please update your location settings!';
}

function test(user) {
    console.log(example(user));
}

test({
  city: "Dallas",
  state: "Texas",
  country: "USA"
});
test({
  city: "San Francisco"
});
test({
  city: "Denver",
  state: "Colorado"
});
test({
  state: "Michigan"
});
test({
  city: "Middlesborough",
  country: "UK"
});
test({
});

这些是如何工作的:

• [city, state] 创建一个数组。
• .filter(Boolean) 从中过滤掉任何 falsy 值(例如空白字符串)。生成的数组将包含零个、一个或两个条目。
• .join(", ") 使用逗号和空格作为分隔符连接条目。如果条目少于两个，则不会有任何分隔符。
• || '...' 如果左侧操作数为假(例如空字符串)，则使用右侧操作数。 (更多关于我贫血的小博客:JavaScript's curiously-powerful || operator。)

---

您可能希望将 .trim() 放在 city 和 state 上，以防它们仅包含空格。