Javascript中带空格的“未定义”变量的字符串串联

Question

我试图显示一个名称，但发现连接未定义的字符串很困难。

我想显示displayName如果存在），或者将firstName和lastName连接起来并显示它，或者如果不存在，则转到defaultName 。

如果我的变量存在

let displayName = "John Doe";
let firstName = "Super";
let lastName = "Man";
let defaultName = "NIL";

console.log(displayName || firstName + " " + lastName || defaultName);

Output: John Doe 

如果变量undefined

  let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName || firstName + " " + lastName || defaultName); 

Output: undefined undefined

当没有whitespace时它可以工作，因为它像arithmetic operator一样对待，但是由于缺少whitespace ，输出将是SuperMan 。

我该如何解决？

Answer 1

这假定仅当firstName和lastName都具有值时，才希望第二个选项显示，否则显示defaultName

 let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName ? displayName : firstName && lastName ? `${firstName} ${lastName}` : defaultName); 

您的firstName + " " + lastName始终会返回一个值，该值在JavaScript中将被评估为true，这是您当前看到的内容的原因。

Answer 2

关于'foo'+ +'foo'的队列笑话。

A || javascript中的B真正的意思是“如果A是真实的，则传递A。否则，传递B”。 并且类型不在窗口之内，JavaScript会尝试将其连接到一个错误。 系统中的最终扳手是奇怪的操作顺序。

displayName || firstName   +  " "  + lastName  || defaultName
(displayName || firstName) + ((" " + lastName) || defaultName)
(        undefined       ) + (" undefined"     || defaultName)
         undefined         + " undefined"
"undefined undefined"

如果您想正确执行此操作，则有很多不错的选择。 我会说类似

function forceGoodString(input) {
    if (typeof input === "string" && input.length) {
        return input;
    }   else    {
        return "";
    }
}

...我实际上不确定使用三个未定义的变量“ NIL”还是“ NIL”会得到什么？ 无论如何，您还需要几行。 可读性没有错，不是所有东西都必须花哨${garbage}和三元一衬。

if (displayName) {
    console.log(displayName);
}   else if (firstName && lastName) {
    console.log(firstName + " " + lastName);
}   else    {
    console.log(defaultName);
}

而且，如果您厌倦了JS中的松散类型，则可以随时学习go！

Answer 3

......关于运算符优先级 ，并充分利用类型转换以及对truthy和falsy值...

 let displayName; let firstName; let lastName; let defaultName = 'NIL'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = 'John'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = ''; lastName = 'Doe'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = 'John'; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); displayName = ''; firstName = ''; lastName = ''; console.log( displayName || ((firstName || '') + ' ' + (lastName || '')).trim() || defaultName ); 

 .as-console-wrapper { max-height: 100%!important; top: 0; }