5 件只发生在 JavaScript 中的奇怪而有趣的事情

2025-06-05

5 件只发生在 JavaScript 中的奇怪而有趣的事情

JavaScript 是一种复杂的语言,其代码的解析和运行方式可能非常令人困惑。它是一种面向对象的语言,但多年来一直没有类。它最初是为浏览器构建的,但现在它也可以在服务器上运行并与文件系统交互。

这些年来,我见过一些奇特而又有趣的代码示例,它们只能用 JavaScript 来运行。以下是其中五个。

#1:数组连接返回字符串

JavaScript 的连接操作有时会让人感到困惑。用+运算符连接数组就是一个典型的例子。

JavaScript 数组连接结果

发生这种情况是因为 JavaScript 将两个数组都转换为字符串,然后像这样连接它们:

[1, 2, 3, 4] + [5, 6, 7, 8]

// is interpreted as:

"1,2,3,4" + "5,6,7,8"

// which yields:

"1,2,3,45,6,7,8"
Enter fullscreen mode Exit fullscreen mode

#2:巴纳纳?

这是 JavaScript 在连接值时推断类型的一个非常流行的例子。

BaNaNa JavaScript 示例

这就是为什么会发生这种情况:

"b" + "a" + + "a" + "a" 

// is interpreted as:

"b" + "a" + (+"a") + "a"

// (+"a") is interpreted as numeric because of the starting +,
// but "a" cannot be converted to a Number, so it is NaN (not a number):

"b" + "a" + NaN + "a"

// NaN is converted to a String during concatenation, making it "NaN":

"b" + "a" + "NaN" + "a"

// String concatenation:

"baNaNa"
Enter fullscreen mode Exit fullscreen mode

#3:这是有效的 JavaScript 代码(配音JSF***

[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]][([]+[][(![]+[]
)[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[
][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+(
[][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(
![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(
!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!
![]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][
[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+[+[]]]+(
![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+[+[]]]+([]+[][(![]+[])[+[]]+([![]]+[][[]])[+!![]+
[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]
])[+!![]+[+[]]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!
Enter fullscreen mode Exit fullscreen mode

不幸的是,完整代码太长,无法显示。

是的,这是有效的 JavaScript 代码。尝试在控制台中运行它,它会输出:

代码结果:控制台输出“JavaScript 令人困惑”

事实证明,任何 JavaScript 函数、字符串、变量或数据类型都可以用 JS 中的 6 个字符组合来表示,并生成完全有效、开箱即用的 JavaScript 代码。这个想法被称为“编程语言的JSF***起源” Brainf***

您可以在此 GitHub repoJSF***中阅读更多相关信息

#4:您可以在 JavaScript 中编写 HTML 注释吗?

HTML 注释在 JavaScript 中完全有效,可以代替常规的///* */注释。事实上,<!----><!-- -->在 JavaScript 中均不执行任何操作,会被忽略。

JavaScript 中的 HTML 注释示例

许多 JavaScript 语法高亮器都没有对此进行解释,因此,虽然很有趣,但在 JS 中开始全职使用 HTML 注释可能并不实际。

这是因为标签内使用了 HTML 注释,<script>所以不支持 JS 的浏览器会忽略它。

当然,这已经不再重要了,因为大多数浏览器都支持 JavaScript,而不支持 JavaScript 的浏览器可能不会显示脚本标签的内容,但这仍然是一个有趣的事实。

#5:最小值大于零……?

许多编程语言都有最小值和最大值特性,表示该语言在单个变量中可以保存的最大数字。

Python 有它的常量sys.maxsize,JavaScript 有它的Number.MIN_VALUE常量。

得到的值是Number.MIN_VALUE一个非常小的数字,但它也大于零?

JavaScript MIN VALUE 常量示例

事实上这是正确的,因为它Number.MIN_VALUE实际上表示的是 JavaScript 中可以用浮点数表示的最小正数,而不是最小的负数。

Number.MIN_VALUE在程序中使用时请注意这一点!

结论

希望你喜欢这篇文章,也喜欢这些独特的 JavaScript 示例。JavaScript 是一门很棒的语言,但有时也容易让人困惑,希望你能从这篇文章中有所收获。

如果您对一些更棘手的 JavaScript 示例感兴趣,有一个名为WtfJS的现有 repo ,其中包含数百个代码片段和解释。

感谢您的浏览。

——加布里埃尔·罗穆阿尔多,2019 年 12 月 15 日

文章来源:https://dev.to/gaberomualdo/5-strange-yet-funny-things-that-only-happen-in-javascript-19p7
PREV
创建虚拟 API 以加快原型设计速度👨‍💻⚡
NEXT
什么是 DNS?