"undefined" 变量与 Javascript 中的 space 的字符串连接

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.[=25，输出将是 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 编码总是 return 一个值，在 JavaScript 中它的计算结果为真，这就是您当前所见的原因。

Answer 2

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

一个|| javascript 中的 B 实际表示 "If A is truthy, pass A. Otherwise, pass B"。并且类型超出 window，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 中的松散类型，你可以随时学习！

Answer 3

...尊重operator precedence and take advantage of type casting as well as of truthy and 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; }

"undefined" 变量与 Javascript 中的 space 的字符串连接

String concatenation for "undefined" variable with space in Javascript

javascript

casting

boolean

operators