论坛 › 马黑黑教程专版 › JS：输出几何文本图案

马黑黑 发表于 2022-11-10 12:15

JS：输出几何文本图案

本帖最后由 马黑黑 于 2022-11-10 12:37 编辑

JS有一个基于 String 的静态方法，即 fromCharCode(参数1,[参数2,参数3,…,参数n])，可将十进制的 Unicode 编码转换为文本字符。因此，只要我们知道某个字符的 Unicode 编码，例如雨伞符号☂，它在 Unicode 字符集中的十进制编码是 9728，则这样获取该字符：

let str = String.fromCharCode(9728);

如此，str 变量输出的结果就是☂ 。

不过雨伞并不是几何图案，几何图案在 Unicode 编码中的位置范围在 9632~9727 之间（含此两数）。这个范围不用去记，可通过查阅资料得到。

只要知道编码范围，借助 String.fromCharCode() 方法，我们就可以非常容易地全部输出几何图案（和其他特定子集字符）：

let outstr = '';
//几何图案编码范围：9632~9727
Array.from({length: 96}).forEach((item,key) => outstr += String.fromCharCode(9632 + key) + ' ');


这样，输出变量 outstr，就能得到全部的 Unicode 几何图案字符。下面解释一下代码：

① Array.from({length: 96}) ：用于构造一个数组，这个数组的长度是 96，96的依据是 9727-9632=95 然后加1，加1的原因是数组以 0 做下标；

② forEach((item,key) ：这是 for 循环的高级变体，它基于前面 ① 创建的数组，也就是说，前面的长度为 96 的数组，每一个数组元素都遍历一次，循环时带两个参数，item 指向数组子项内容自身，key 是数组子项下标（索引）；

③ => ：箭头函数，它后面的内容就是匿名的箭头函数要执行的任务；

④ String.fromCharCode(9632 + key) + ' ' ：使用 JS 的 fromCharCode 方法，从 9632~9727 范围里将 Unicode 编码转换成真实字符并赋值给将要输出的变量 outstr 。

最后要输出结果，可以用一个 div 装载，例如，papa.innerText = outstr; ，也可以使用 console.log 在控制台显示，console.log(outstr); 。

示例在二楼。

马黑黑 发表于 2022-11-10 12:17

<style>
#papa {
        margin: 50px auto 0;
        width: 90%;
        height: 300px;
        position: relative;
}

</style>

<div id="papa"></div>

<script>
let outstr = '';
//几何图案 9632~9727
Array.from({length: 96}).forEach((item,key) => outstr += String.fromCharCode(9632 + key) + ' ');
papa.innerText = outstr;
</script>

马黑黑 发表于 2022-11-10 12:17

二楼代码：
<style>
#papa {
        margin: 50px auto 0;
        width: 90%;
        height: 300px;
        position: relative;
}
</style>

<div id="papa"></div>

<script>
let outstr = '';
//几何图案 9632~9727
Array.from({length: 96}).forEach((item,key) => outstr += String.fromCharCode(9632 + key) + ' ');
papa.innerText = outstr;
</script>

红影 发表于 2022-11-10 12:43

这个一下子看到了Unicode 编码的96个符号的样子了呢{:4_204:}

樵歌 发表于 2022-11-10 13:00

又准备放大招了{:4_173:}

马黑黑 发表于 2022-11-10 13:12

樵歌 发表于 2022-11-10 13:00
又准备放大招了

这个没啥招，只是最近有几位小盆友对特殊字符有兴趣，做按钮用

马黑黑 发表于 2022-11-10 13:13

红影 发表于 2022-11-10 12:43
这个一下子看到了Unicode 编码的96个符号的样子了呢

不同字符子集也可以去弄弄玩玩额

红影 发表于 2022-11-10 14:52

马黑黑 发表于 2022-11-10 13:13
不同字符子集也可以去弄弄玩玩额

对这个完全不懂呢，搞不清那些子集都是多少序号{:4_173:}

马黑黑 发表于 2022-11-10 17:56

红影 发表于 2022-11-10 14:52
对这个完全不懂呢，搞不清那些子集都是多少序号

这个要查Unicode相关的资料的

樵歌 发表于 2022-11-10 18:55

马黑黑 发表于 2022-11-10 13:12
这个没啥招，只是最近有几位小盆友对特殊字符有兴趣，做按钮用

你说的小盆友是小辣椒吧{:4_189:}

马黑黑 发表于 2022-11-10 19:30

樵歌 发表于 2022-11-10 18:55
你说的小盆友是小辣椒吧

你们都是小盆友

红影 发表于 2022-11-10 21:44

马黑黑 发表于 2022-11-10 17:56
这个要查Unicode相关的资料的

等用的时候再说{:4_173:}

马黑黑 发表于 2022-11-10 21:46

红影 发表于 2022-11-10 21:44
等用的时候再说

我有头有份资料，一直留着。不过此类东东网上一抓一大把的

红影 发表于 2022-11-10 21:57

马黑黑 发表于 2022-11-10 21:46
我有头有份资料，一直留着。不过此类东东网上一抓一大把的

多了的好，搜起来方便。

马黑黑 发表于 2022-11-10 21:58

红影 发表于 2022-11-10 21:57
多了的好，搜起来方便。

Unicode哪里都会用的上，所要少不了，国内外都有这方面的资料

红影 发表于 2022-11-10 22:05

马黑黑 发表于 2022-11-10 21:58
Unicode哪里都会用的上，所要少不了，国内外都有这方面的资料

没感觉到呢，用途这么广啊。

马黑黑 发表于 2022-11-10 22:10

红影 发表于 2022-11-10 22:05
没感觉到呢，用途这么广啊。

所有的文字符号，都在Unicode编码里有自己的位置。网页编码用 UTF-8 的，可以使用全部的Unicode字符集。

红影 发表于 2022-11-11 21:30

马黑黑 发表于 2022-11-10 22:10
所有的文字符号，都在Unicode编码里有自己的位置。网页编码用 UTF-8 的，可以使用全部的Unicode字符集。

我好像都没看过全部的Unicode字符集是什么{:4_173:}

马黑黑 发表于 2022-11-11 21:31

红影 发表于 2022-11-11 21:30
我好像都没看过全部的Unicode字符集是什么

就是全世界所有的语言文字大字符

红影 发表于 2022-11-11 22:47

马黑黑 发表于 2022-11-11 21:31
就是全世界所有的语言文字大字符

只找过里面好玩的图案，没怎么接触过。

查看完整版本: JS：输出几何文本图案