为什么 || 中没有以下值设置条件？

Question

以下函数根据浏览器中设置的语言设置框架的语言：

util.setLang = (lang) => {
  console.log(lang)
  let selectedLang = ''
  const english = 'en' || 'en-US' || 'en-UK'
  const chinese = 'zh' || 'zh-TW' || 'zh-CN'
  if (lang === english) selectedLang = 'en'
  if (lang === chinese) selectedLang = 'zh'
  Vue.config.lang = selectedLang
}

当 console.log(lang) 记录 'zh' 时。有用。 selectedLang 设置为 'zh'。当 console.log(lang) 记录 'zh-Tw' selectedLang 时，它被设置为一个空字符串。

这是为什么？

Answer 1

这个

const english = 'en' || 'en-US' || 'en-UK'
const chinese = 'zh' || 'zh-TW' || 'zh-CN'

直接评估为

const english = 'en'
const chinese = 'zh'

下一行取决于 lang

的值

if (lang === english) selectedLang = 'en'
if (lang === chinese) selectedLang = 'zh'

虽然 english 和 chinese 具有单个值，但比较采用该单个值并与其进行比较，但不与所有三个值进行比较。

更好用

const english = ['en', 'en-US', 'en-UK']
const chinese = ['zh', 'zh-TW', 'zh-CN']

使用数组的 indexOf 方法，然后使用

if (english.indexOf(lang) !== -1) selectedLang = 'en'
if (chinese.indexOf(lang) !== -1) selectedLang = 'zh'

Answer 2

那是因为字符串 "a" || "b" 始终等于 "a".

您应该在条件中而不是在要比较的字符串中使用 or 运算符：

如果(lang == 'a' || lang == 'b')

Answer 3

Why isn't the following value in a || condition being set?

因为当你说

const chinese = 'zh' || 'zh-TW' || 'zh-CN'

它会将 chinese 设置为 zh 仅因为 Boolean('zh') 为真。

它不会超过此链中的 zh。

如果你想确保中文选择应该是'zh', 'zh-TW', 'zh-CN'之一，那就做

util.setLang = (lang) => {
  console.log(lang)
  let selectedLang = ''
  const english = ['en','en-US','en-UK'];
  const chinese = ['zh','zh-TW','zh-CN'];
  if ( english.indexOf(selectedLang) != -1 ) selectedLang = 'en'
  if ( chinese.indexOf(selectedLang) != -1 ) selectedLang = 'zh'
  Vue.config.lang = selectedLang
}

更通用的解决方案可能是

var constLanguages = [
  ['en','en-US','en-UK'],
  ['zh','zh-TW','zh-CN']
];
selectedLang = constLanguages.filter(function(val){
  return val.indexOf(selectedLang) != -1;
})[0];

这将确保如果其中一项在数组中匹配，则其第一项将成为 selectedLang

为什么 || 中没有以下值设置条件？

Why isn't the following value in a || condition being set?

javascript

conditional