带有空值或未定义值的 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 将 null 或 undefined 转换为 String 连接中的字符串值的奇怪背后的历史是什么?
• 在未来的 ECMAScript 版本中是否有可能改变这种行为?
• 在不陷入这个问题的情况下，将 String 与潜在的 null 或 undefined 对象连接起来的最漂亮的方法是什么(得到一些 "字符串中间的 "null" 的 undefined")?按照主观标准最漂亮，我的意思是:简短、干净和有效.不用说 '' + (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 或 undefined 对象连接起来最漂亮的方法是什么[...]?

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

有几种方法，你自己也提到了一部分.简而言之，我能想到的唯一干净的方法是一个函数:

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.

另一件事是:您可以使用代码编译器"= 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屋！