JS：输出几何文本图案

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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

马黑黑 · 发表于 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>