Избегать длинных операторов 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!';
});

LiveПример бита строки от пользователя:

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) отфильтровывает любые ложные значения из него (например, пустые строки).Полученный массив будет иметь ноль, одну или две записи.
• .join(", ") объединяет записи с запятой и пробелом в качестве разделителя.Если записей меньше двух, разделителя не будет.
• || '...' использует правый операнд, если левый операнд ложный (например, пустая строка).(Больше на моем маленьком анемичном блоге: необычайно мощный JavaScript-оператор || оператор .)

---

Возможно, вы захотите поставить .trim() на city и state в случае, если они содержат только пробелы.