具有空值或未定义值的JavaScript字符串串联行为 [英] JavaScript String concatenation behavior with null or undefined values

问题描述

您可能知道，在JavaScript '' + null = "null"和'' + undefined = "undefined"中(在大多数浏览器中，我可以测试:Firefox，Chrome和IE).我想知道这种奇怪现象的根源(Brendan Eich头脑中的到底是什么?！)，以及是否有任何在未来版本的ECMA中进行更改的目的.必须要做'sthg' + (var || '')将字符串与变量连接起来并使用诸如 Underscore 之类的第三方框架，或者使用锤子敲打果冻钉子，这确实令人沮丧.

As you may know, in JavaScript '' + null = "null" and '' + undefined = "undefined" (in most browsers I can test: Firefox, Chrome and IE). I would like to know the origin of this oddity (what the heck was in the head on Brendan Eich?!) and if there is any aim for changing it in a future version of ECMA. It's indeed pretty frustrating having to do 'sthg' + (var || '') for concatenating Strings with variables and using a third party framework like Underscore or other for that is using a hammer for jelly nail pounding.

要满足StackOverflow要求的条件并阐明我的问题，它是一个三重问题:

To meet the criteria required by StackOverflow and clarify my question, it is a threefold one:

• 使JS在String串联中将null或undefined转换为其字符串值的奇数背后的历史是什么?
• 在将来的ECMAScript版本中，这种行为是否有可能改变?
• 将String与潜在的null或undefined对象连接的最漂亮的方法是什么，而不会陷入此问题(在字符串中间获取"null"的某些"undefined")?按照主观标准 prettiest ，我的意思是:简短，干净且有效.不用说'' + (obj ? obj : '')并不是很漂亮……

• What is the history behind the oddity that makes JS converting null or undefined to their string value in String concatenation?
• Is there any chance for a change in this behavior in future ECMAScript versions?
• What is the prettiest way to concatenate String with potential null or undefined object without falling into this problem (getting some "undefined" of "null" in the middle of the String)? By the subjective criteria prettiest, I mean: short, clean and effective. No need to say that '' + (obj ? obj : '') is not really pretty…

推荐答案

将String与潜在的null或未定义的对象连接起来最漂亮的方法是什么?

What is the prettiest way to concatenate String with potential null or undefined object without falling into this problem [...]?

有几种方法，您自己部分提及了它们.简而言之，我能想到的 only 简洁方法是一个函数:

There are several ways, and you partly mentioned them yourself. To make it short, the only clean way I can think of is a function:

const Strings = {};
Strings.orEmpty = function( entity ) {
    return entity || "";
};

// usage
const message = "This is a " + Strings.orEmpty( test );

当然，您可以(并且应该)更改实际实现以适合您的需求.这就是我认为这种方法优越的原因:它引入了封装.

Of course, you can (and should) change the actual implementation to suit your needs. And this is already why I think this method is superior: it introduced encapsulation.

真的，如果没有封装，您只需要问最简洁"的方式是什么.您问自己这个问题，因为您已经知道您将要进入一个无法再更改实现的地方，因此您希望它立即变得完美.事实就是如此:需求，观点乃至环境都在变化.他们不断发展.那么，为什么不让自己只用一行或可能要进行一两个测试就可以更改实现呢?

Really, you only have to ask what the "prettiest" way is, if you don't have encapsulation. You ask yourself this question because you already know that you are going to get yourself into a place where you cannot change the implementation anymore, so you want it to be perfect right away. But that's the thing: requirements, views and even envrionments change. They evolve. So why not allow yourself to change the implementation with as little as adapting one line and perhaps one or two tests?

您可以称其为作弊，因为它并没有真正回答如何实现实际的逻辑.但这就是我的观点:没关系.好吧，也许一点.但是，实际上，不必担心，因为更改将变得如此简单.而且由于它不是内联的，所以它看起来也更漂亮-不管您是以这种方式还是以更复杂的方式实现它.

You could call this cheating, because it doesn't really answer how to implement the actual logic. But that's my point: it doesn't matter. Well, maybe a little. But really, there is no need to worry because of how simple it would be to change. And since it's not inlined, it also looks a lot prettier – whether or not you implement it this way or in a more sophisticated way.

如果在整个代码中一直重复执行||内联，则会遇到两个问题:

If, throughout your code, you keep repeating the || inline, you run into two problems:

• 您重复了代码.
• 而且由于您重复代码，因此将来很难维护和更改.

在进行高质量软件开发时，有两点通常被称为反模式.

And these are two points commonly known to be anti-patterns when it comes to high-quality software development.

有些人会说这是太多的开销；他们将谈论性能.这是胡说八道.首先，这几乎不增加开销.如果这是您所担心的，则您选择了错误的语言.甚至jQuery也使用函数.人们需要克服微观优化.

Some people will say that this is too much overhead; they will talk about performance. It's non-sense. For one, this barely adds overhead. If this is what you are worried about, you chose the wrong language. Even jQuery uses functions. People need to get over micro-optimization.

另一件事是:您可以使用代码"compiler" = minifier.这方面的好工具将尝试检测在编译步骤中内联哪些语句.这样，您可以保持代码的干净和可维护，并且如果您仍然相信它或确实有一个重要的环境，那么仍然可以得到最后的性能下降.

The other thing is: you can use a code "compiler" = minifier. Good tools in this area will try to detect which statements to inline during the compilation step. This way, you keep your code clean and maintainable and can still get that last drop of performance if you still believe in it or really do have an environment where this matters.

最后，请对浏览器有所信心.他们将优化代码，如今他们在代码方面做得非常出色.

Lastly, have some faith in browsers. They will optimize code and they do a pretty darn good job at it these days.

这篇关于具有空值或未定义值的JavaScript字符串串联行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！