[英]String concatenation for “undefined” variable with space in Javascript
I am trying to display a name and I am finding it difficult to concatenate undefined strings. 我试图显示一个名称,但发现连接未定义的字符串很困难。
I want to display displayName
if it's present or concatenate firstName
and lastName
and display it or go to defaultName
if it's not present. 我想显示
displayName
如果存在),或者将firstName
和lastName
连接起来并显示它,或者如果不存在,则转到defaultName
。
If my variables are present 如果我的变量存在
let displayName = "John Doe";
let firstName = "Super";
let lastName = "Man";
let defaultName = "NIL";
console.log(displayName || firstName + " " + lastName || defaultName);
Output: John Doe
If variables are undefined
如果变量
undefined
let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName || firstName + " " + lastName || defaultName);
Output: undefined undefined
It works when there is no whitespace
as it treats it like an arithmetic operator
but the output will be SuperMan
due to lack of whitespace
. 当没有
whitespace
时它可以工作,因为它像arithmetic operator
一样对待,但是由于缺少whitespace
,输出将是SuperMan
。
How do I solve it? 我该如何解决?
This assumes that only if firstName and lastName both have values, you want the second option to display otherwise show the defaultName 这假定仅当firstName和lastName都具有值时,才希望第二个选项显示,否则显示defaultName
let displayName = undefined; let firstName = undefined; let lastName = undefined; let defaultName = "NIL"; console.log(displayName ? displayName : firstName && lastName ? `${firstName} ${lastName}` : defaultName);
Your firstName + " " + lastName
as coded is always going to return a value which in JavaScript will have it evaluate to true which is the cause for what you are currently seeing. 您的
firstName + " " + lastName
始终会返回一个值,该值在JavaScript中将被评估为true,这是您当前看到的内容的原因。
Queue jokes about 'foo' + + 'foo'. 关于'foo'+ +'foo'的队列笑话。
A || A || B in javascript really means "If A is truthy, pass A. Otherwise, pass B".
javascript中的B真正的意思是“如果A是真实的,则传递A。否则,传递B”。 And types are out the window, Javascript will attempt to concatenate to a fault.
并且类型不在窗口之内,JavaScript会尝试将其连接到一个错误。 Final wrench in the system is weird order of operation.
系统中的最终扳手是奇怪的操作顺序。
displayName || firstName + " " + lastName || defaultName
(displayName || firstName) + ((" " + lastName) || defaultName)
( undefined ) + (" undefined" || defaultName)
undefined + " undefined"
"undefined undefined"
If you want to do this right, you have a bunch of good alternative options. 如果您想正确执行此操作,则有很多不错的选择。 I'd say something like
我会说类似
function forceGoodString(input) {
if (typeof input === "string" && input.length) {
return input;
} else {
return "";
}
}
...I'm not actually sure what you expect with three undefined variables, " NIL" or just "NIL"? ...我实际上不确定使用三个未定义的变量“ NIL”还是“ NIL”会得到什么? In any event, you need a few more lines.
无论如何,您还需要几行。 Nothing wrong with readability, not everything has to be fancy fancy
${garbage}
and ternary one liners. 可读性没有错,不是所有东西都必须花哨
${garbage}
和三元一衬。
if (displayName) {
console.log(displayName);
} else if (firstName && lastName) {
console.log(firstName + " " + lastName);
} else {
console.log(defaultName);
}
And if you ever get sick of the loose types in JS, you could always learn go! 而且,如果您厌倦了JS中的松散类型,则可以随时学习go!
... respect operator precedence and take advantage of type casting as well as of truthy and falsy values ... ......关于运算符优先级 ,并充分利用类型转换以及对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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.