JavaScript 专题之花式表示 26 个字母

更新日期: 2020-04-07阅读: 2k标签: 字符

先看效果

先来个思考题:

// 下面这一句会打印什么呢?
[+[][0] + []][0][1]

我们直接看效果:

[+[][0] + []][0][1]
"a"

如果觉得打印一个字母不过瘾的话,打印一句话呢?

// 注意,在Chrome浏览器中打印

[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]]+[]][0][23]+[[][0] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[+[1 + [[][0] + []][0][3] +309][0] + []][0][7]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][0]

再来看看效果:

"i love you"


基础测验

如果想了解以上是怎么实现的,先来检测下自己对 JavaScript 隐式类型转换的理解程度:

// 下面这些值都会打印什么?
console.log(+[]);
console.log(1 + []);
console.log(+undefined);
console.log([] == []);
console.log(+[] == +[]);

如果不能准确的说出以上的结果,或者是想更深入的理解以上的转换过程,推荐先看两篇文章

JavaScript专题之头疼的类型转换(上).md

JavaScript专题之头疼的类型转换(下).md


开始解密

第一个效果:

[][0]

因为空数组并不存在第一个元素,所以会打印 undefined

第二个效果:

undefined + []

undefined + [] 相当于 undefined + "" 结果为"undefined"字符串。

这时候已经获得一个 undefined 字符串了,我们只用通过下标就可以取到对应的字母了。

然而,如果我们不用括号,我们怎么取值呢?这时候,我们就需要利用一个技巧:

第三个效果:

['undefined'][0][0]

这时候我们就获得了"u"字母,通过改变下标,我们可以获取u、n、d、e、f、i 共6个字母

是不是很有意思,然而这才只是个开始。


NaN

第一个效果:

+undefined

相当于 Number(undefined),结果是 NaN

第二个效果:

NaN + []

相当于 NaN + "" 结果为NaN字符串

第三个效果:

[NaN][0][1]

通过这种方式我们可以取到字母 a。


false

第一个效果:

[] == []

结果自然是 false

注意,因为之前两个例子的铺垫,或许大家已经渐渐的明白当取出一个值的时候,如果转成字符串,如果取下标的字母了

第二个效果:

// 通过 value + []转成字符串
false + []

第三个效果:

// 通过 [value][0][n] 取字母
['false'][0][0]

我们就可以取出 f 字母

通过这种方式,我们可以取出 "f"、"a"、"l"、"s"、"e"五个字母


true

直接看核心步骤:

+[] == +[]

相当于比较 "" == "",结果自然为 true

剩下的想必大家已经轻车熟路了。

通过以上 4 种方法取到的字母依然有限,我们需要一些其他的方法来获得更多的字母。


Infinity

注意:在前面我们已经取到了字母 e。

+("1e309")

转成数字后,相当于 1 乘以 10 的 309 次方,大于 JavaScript 最大的数,所以结果会是 Infinity,剩下的步骤与上面的相同,以后就不赘述了。

我们可以从中取出 t 和 y


function

注意:到此为止,我们已经获得了 u n d e f i t r f a l s t y,从中我们可以拼成"find"字符串。

[]["find"]

会显示数组的find函数,结果为:

function find() { [native code] }

通过这种方法,我们可以取出 c o v。

不过注意:通过这种方式取字母 v 会有兼容性问题!!!


神奇的constructor

注意,我们已经有了 17 个字母了,我们现在可以拼出"constructor"!

constructor 可是一个神奇的属性,因为通过它,我们可以获得各种类型的值对象的构造函数!

0["constructor"] // function Number() { [native code] }

""["constructor"] // function String() { [native code] }

...

通过以上方式,我们可以取 m、g

也许我们会疑问,"" 如何表示呢?

[] + [] === "" // true


name

有了 m,我们现在可以拼出 name,可是 name 有什么用呢?

"to" + ""["constructor"]["name"] // "toString"

我们最终的目的是拼出万能的"toString"字符串


万能的 toString

我们之所以拼出 toString,是因为利用 toString 这个方法可以表示出 26个 字母!

这时候,就要隆重介绍下这个平时看起来不起眼,但是在这里确实最终主角的 toString 方法!

以下引自 W3C school:

作用:

toString() 方法可把一个 Number 对象转换为一个字符串,并返回结果。

用法:

NumberObject.toString(radix)

参数解释:

radix:表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值

举个例子:

var number = new Number(10);
number.toString('16');

就是将10用16进制进行表示,上面的例子打印的结果是"a"。

注意,radix最大可以表示36!!!

var number = new Number(35);
number.toString('36');

打印的字母是 "z"! 用这种方法,我们可以表示剩下的所有字母!

但是我们怎么利用这个 toString 方法呢?准确的说,我们该怎么生成一个 number 对象呢?还要拼出 new Number 吗?

其实都不用!这个时候,就彰显出了 JavaScript 隐式类型转换的优秀之处:

35["toString"](36) // z

注意:到了这个时候,我们也不得不使用()了!

到此为止,我们已经可以表示出所有的字母了,有的很轻松的就表示出来,有的则有些麻烦,而且显示也很长,比如字母 p:

25[[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6] + [[] + []][0][[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]][[[][0] + []][0][1]+[+[][0] + []][0][1]+[0[[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][0] + []][0][1]+[[[] == []][0] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[+[] == +[]][0] + []][0][1]+[[][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][3]+[[+[] == +[]][0] + []][0][0]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[+[] == +[]][0] + []][0][1]]+[]][0][11]+[[][0] + []][0][3]]](27)


其他

最近新建了公众号,搜索「冴羽的JavaScript博客」或者 「yayujs」,文章也会第一时间发送,收到推送后依然建议到各平台阅读。

JavaScript 系列目录地址:https://github.com/mqyqingfen

 

链接: https://www.fly63.com/article/detial/8559

js判断字符串是否含有特殊字符和emoji表情?以及如何过滤

原生js判断字符串是否含有特殊字符和emoji表情,js禁止输入框输入特殊符号或emoji表情

JS转换HTML转义符

去掉html标签,普通字符转换成转意符,转意符换成普通字符, 转成空格,回车转为br标签,去除开头结尾换行,并将连续3次以上换行转换成2次换行,将多个连续空格合并成一个空格

Unicode字符集的由来

Unicode于乱世出生逐渐成为标准统一字符世界,至今仍持续发展,造福了社会,极大的提升了生产效率,虽未与ASCII并列与IEEE里程碑,但也是计算机科学史中一件举足轻重的大事记。

javascript如何判断字符是否是中文?

有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到。用Javascript判断通常有两种方法。

Js如何判断字符串中是否包含某个字符串?

JavaScript中要判断字符串中是否包含某个字符串有多种方法,下面我们来看一下使用indexOf()方法、search()方法、match()方法来判断字符串中是否包含某个字符串。

javascript怎么判断字符是否是中文?

有时我们需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到。那么如何判断?下面本篇文章就来给大家介绍一下判断方法

javascript中字符串如何转换成数组?

javascript中字符串如何转换成数组?下面本篇文章就来给大家介绍一下使用javascript将字符串转换成数组的方法,在javascript中,可以使用split()方法来将字符串转换成数组。split()方法用于把一个字符串分割成字符串数组

javascript如何添加前置0?

很多时候为了显示格式,需要在某一字符串不满位的情况下进行前补0操作。下面这篇文章就给大家主要介绍了javascript添加前置0(补零)的方法。

Javascript怎样提取字符个数?

javascript中获取字符串的字符个数主要是根据字符串的变量,然后通过.length就可以获取到字符串的长度。JavaScript中可以使用length属性来提取字符个数。

字符集的知识

想必做过爬虫的同学肯定被编码问题困扰过,有 UTF-8、GBK、Unicode 等等编码方式,但你真的了解其中的原理吗?下面我们就来了解一下 Unicode 和 UTF-8 编码到底有什么关系。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!