Javascript, если оптимизация условия

Я хочу улучшить более одного «если и еще если». У меня есть условия, упомянутые ниже, но я раздражаюсь, потому что делаю слишком много «повторений». Как я могу это исправить?

const locale = window.location.origin;
const pathName = window.location.pathname;
let lang = pathName.toString().split("/")[1];

if (lang === "")
  lang = "tr"
else if (lang === "en")
  lang = "en"
else if (lang === "ar")
  lang = "ar"
else if (lang !== "tr" || "en" || "ar")
  lang = localStorage.getItem('VueAppLanguage')

console.log(lang)

const res = await axios.get(locale + '/' + lang + '/categories')

просто ради лучшей абстракции я бы использовал карту, связывающую значения пути локали с языком на случай, если они не всегда полностью совпадают, и я бы просто взял язык, сопоставленный с текущей локалью, если таковой имеется, иначе localStorage.getime('VueAppLanguage'). Я писал такой ответ, но вижу, что у вас уже есть рабочие решения в очереди ответов.

Diego De Vita 09.04.2022 10:45

Кстати, lang !== "tr" || "en" || "ar" всегда будет правдивым. Булевы операторы так не работают! Должно быть lang !== "tr" && lang !== "en" && lang != "ar" или !["tr", "en", "ar"].includes(lang).

CherryDT 09.04.2022 10:48
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
45
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете взять значение по умолчанию и проверить известные языки.

lang ||= "tr";

if (!['ar', 'en', 'tr'].includes(lang)) lang = localStorage.getItem('VueAppLanguage');

Выражение

lang !== "tr" || "en" || "ar"

не работает должным образом, потому что сравнение

lang !== "tr"

проверяет только первую строку и никогда другую для сравнения.

Значение с проверкой логическое ИЛИ || — это левая часть (левая сторона) равна правдивый, как непустая строка или другие (см. ссылку), и принимает только следующее значение, если левая сторона равна ложный, противоположной правдивый.

Для сравнения списка (здесь массив) значений можно взять Array#includes.

ошибка, которую я получил Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'inline') at ContentFiltering.apply (include.preload.js:2287:18)

Liza 09.04.2022 10:55

извините, я не могу помочь.

Nina Scholz 09.04.2022 11:00

Я понимаю ошибку, но я понятия не имею, как ее решить. Ошибка: когда вы вручную меняете значение VueAppLanguage в «Локальном хранилище» и обновляете страницу, это вызывает «вышеупомянутую» ошибку.

Liza 09.04.2022 11:34

у меня нет опыта работы с локальным хранилищем и промисами, извините.

Nina Scholz 09.04.2022 11:36
Ответ принят как подходящий
  1. Если pathName.toString().split("/")[1] пусто, установите «tr» в качестве значения по умолчанию.
  2. Проверьте, является ли lang одним из стандартных языков.
const locale = window.location.origin;
const pathName = window.location.pathname;
let lang = pathName.toString().split("/")[1] || "tr";       // 1
let noStandardLanguage = !["tr","en","ar"].includes(lang);  // 2

if (noStandardLanguage)
  lang = localStorage.getItem('VueAppLanguage')

console.log(lang)

const res = await axios.get(locale + '/' + lang + '/categories')

ошибка, которую я получил Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'inline') at ContentFiltering.apply (include.preload.js:2287:18)

Liza 09.04.2022 10:52

Основываясь на коде, который вы разместили, я думаю, что это await axios.get(locale + '/' + lang + '/categories') выдает эту ошибку. Вам нужно добавить точки останова, чтобы понять, почему lang или locale не определены. Например, что возвращает localStorage.getItem('VueAppLanguage')?

Rickard Elimää 09.04.2022 10:57

все мои условия работают, как я сказал выше. но когда я использую ваши коды, которые я не понимаю, я получаю ошибку, которую я сказал. Я пытаюсь найти, откуда исходит ошибка.

Liza 09.04.2022 11:17

Я понимаю ошибку, но я понятия не имею, как ее решить. Ошибка: когда вы вручную меняете значение VueAppLanguage в «Локальном хранилище» и обновляете страницу, это вызывает «вышеупомянутую» ошибку.

Liza 09.04.2022 11:34

Что ж, странно, если ваш исходный код не генерирует ту же ошибку, потому что она должна быть такой же (неправда: ваш код всегда читается из VueAppLanguage). Я также понятия не имею, на что вы изменили VueAppLanguage и почему у вас вообще такой код. Если вы хотите разрешить только "tr", "en", "ar" в качестве языков, тогда код не должен выглядеть так, но это не то, о чем вы просили. Кроме того, я понятия не имею, какие параметры разрешены в вызове API, потому что исходный код никогда не объяснял этого.

Rickard Elimää 09.04.2022 23:09

Другие вопросы по теме