使用 ||合并第一个非空值

Question

这是一个函数：

function() {

    // if on wordpress site decipher if English or Français by using url path
    var lang = '';  
    var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

        if (wp_path == "/en/") {
        lang = "Français";}
        else if (wp_path == "/fr/") {
        lang = "English"; 
        }

    // if on ruby site decipher if English or Français by using querySelector on element
    var ruby_lang = document.querySelector('.menu--primary a[href*="lang="]').textContent.trim();

    // either lang or ruby_lang will be null, assign value to opp_language accordingly
    var opp_language = lang || ruby_lang;

return opp_language;

}

在 Chrome JS 控制台中，如果我逐行输入它，这将起作用：

例如关于 url http://www.example.com/en/

var lang = '';  
        var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

            if (wp_path == "/en/") {
            lang = "Français";} // yes NOT English, it's opposite
            else if (wp_path == "/fr/") {
            lang = "English"; 
            }

Returns 符合预期的法语。

然后，当我在没有包含 en 或 fr 的 url 路径的页面上时，我知道变量 "ruby_lang" 将 return 为英语或法语。我已经验证了该功能的第二部分在控制台中有效。

所以第三部分大概是问题所在。我的期望是，此时 lang 或 ruby_lang 都设置为真值。所以：

// either lang or ruby_lang will be null, assign value to opp_language accordingly
        var opp_language = lang || ruby_lang;

但是，每当我运行这个函数 opp_language 是未定义的。

是否双杠||语法行为与我理解的不同？

Answer 1

如果在这一行之后 var opp_language = lang || ruby_lang; 你的变量 app_language 是 undefined 这意味着 lang 和 ruby_lang 的计算结果都是假的。如果 "coalesce series" 中的所有值都计算为假，则表达式将 return 列表中的最后一个值。

如果您现在继续并在您的控制台中输入 var a = b || c 其中 b 和 c 是 undefined 然后登录 a 您将看到它确实是 undefined.

当 document.querySelector() 未找到某个元素时，您的 ruby_language 将是 null 或 undefined，如果您得到 undefined 那么它很可能是。

因此，基本上确保您的变量已初始化并且具有不计算为 false 的默认值，我想。

Answer 2

我明白了，但我不太明白。我使用了以前从未使用过的 try and catch。据我了解，如果无法设置变量，它们就会是假的，不是吗？

无论如何，这有效：

function() {

    // if on wordpress site decipher if English or Français by using url path
    var lang = '';  

  try {
    var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

        if (wp_path == "/en/") {
        lang = "Français";}
        else if (wp_path == "/fr/") {
        lang = "English"; 
        }
  } catch (e) {
    lang = false;
  }


  // if on ruby site decipher if English or Français by using querySelector on element

  try {
  var ruby_lang = document.querySelector('.menu--primary a[href*="lang="]').textContent.trim();
  }
  catch (e) {
    var ruby_lang = false;
  }

    // either lang or ruby_lang will be null, assign value to opp_language accordingly
    var opp_language = lang || ruby_lang;

return opp_language;

}

使用 ||合并第一个非空值

Using || to coalesce first non null value

javascript

google-tag-manager