发现一个很有创意的小工具网站，如封面图所示性能很简略，就是将一个URL地址转换为都是 ooooooooo 的样子，通过转换后的地址拜访能够转换回到原始地址，简略流程如下图所示。转换的逻辑有点像短链平台一样，只不过这个是将你的URL地址变的很长长长长，然而看着都是 ooooooooo，很好奇是如何实现的，所以查阅了源码，本文解读其外围实现逻辑，很乏味且奇妙的实现了这个性能。
前置知识点
在正式开始前，先理解一些须要学习的知识点。因为波及到两个地址其实也就是字符串之间的转换，会用到一些编码和解码的能力。
将字符转为utf8数组，转换后的每个字符都有一个特定的惟一数值，比方 http 转换后的 utf8 格局数组即是 [104, 116, 116, 112]。
toUTF8Array(str) { var utf8 = []; for (var i = 0; i < str.length; i++) { var charcode = str.charCodeAt(i); if (charcode < 0x80) utf8.push(charcode); else if (charcode < 0x800) { utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f)); } else if (charcode < 0xd800 || charcode >= 0xe000) { utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f)); } else { i++; charcode = ((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff) utf8.push(0xf0 | (charcode >> 18), 0x80 | ((charcode >> 12) & 0x3f), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f)); } } console.log(utf8, 'utf8'); return utf8; }下面是编码，对应上面的则是解码，将utf8数组转换为字符串，比方 [99, 111, 109] 转换后的 utf8 格局数组即是 com。
Utf8ArrayToStr(array) { var out, i, len, c; var char2, char3; out = ""; len = array.length; i = 0; while (i < len) { c = array[i++]; switch (c >> 4) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: // 0xxxxxxx out += String.fromCharCode(c); break; case 12: case 13: // 110x xxxx 10xx xxxx char2 = array[i++]; out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F)); break; case 14: // 1110 xxxx 10xx xxxx 10xx xxxx char2 = array[i++]; char3 = array[i++]; out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0)); break; } } return out; }将 Number 对象以 4 进制的模式示意为字符串，toString 用的比拟多，然而外面传入参数的场景比拟少，这个参数 radix 是一个可选的参数，用于指定转换的进制数，范畴为 2 ~ 36，如果未传入该参数，则默认应用 10 进制。
n.toString(4)在字符串左侧填充指定字符，直到字符串达到指定长度。根本语法为 str.padStart(targetLength [, padString])。
- targetLength：必须，指定冀望字符串的最小长度，如果以后字符串小于这个长度，则会在左侧应用 padString 进行填充，直到字符串达到指定长度。
- padString：可选，指定用于填充字符串的字符，默认为 " "（空格）。
str.padStart(4, '0')URL 编码/解码
上面正式开始URL编码的逻辑，外围的逻辑如下：
- 转换为utf8数组
- 转换为4进制并左侧补0到4位数
- 宰割转换为字符串数组
- 映射到o的不同模式
- 再次拼接为字符串，即转换实现后的URL
// 获取utf8数组let unversioned = this.toUTF8Array(url) // 转换为base 4字符串 // padstart十分重要！否则会失落前导0 .map(n => n.toString(4).padStart(4, "0")) // 转换为字符数组 .join("").split("") // 映射到o的不同模式 .map(x => this.enc[parseInt(x)]) // 连接成单个字符串 .join("")下面有两个关键点解释一下，首先映射到o的不同模式这个是什么意思呢？其实转换后的o并不是一种“o”，而是4种，只不过咱们肉眼看到的成果很像，通过 encodeURI 转换后的字符能够看进去。
encodeURI('o---')// o-%CE%BF-%D0%BE-%E1%B4%8F这里其实也解释了为什么下面为什么是转换为4进制和左侧补0到四位数。因为下面代码定义的 this.enc 如下，因为总共只有四种“o”，4进制只会产生0，1，2，3，这样就能够将转换后的utf8字符一一对应上这几种非凡的“o”。
enc = ["o", "", "", ""] 最初的成果举例转换 http 这个字符：
- 转换为utf8数组：
[ 104, 116, 116, 112 ] - 转换为4进制并左侧补0到4位数：
['1220', '1310', '1310', '1300'] - 宰割转换为字符串数组：
['1', '2', '2', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '0', '0'] - 映射到o的不同模式：`[
'', '', '', 'o',
'', '', '', 'o',
'', '', '', 'o',
'', '', 'o', 'o'
] ` - 再次拼接为字符串，即转换实现后的URL：
ooooo
到此整个转换编码的过程就完结了，看完后是不是感觉设计的很不错，编码完后就是解码，解码就是将下面的过程倒序来一遍，复原到最原始的URL地址。这里要留神一点的是每次解析4个字符且parseInt以4进制的形式进行解析。
// 获取url的base 4字符串示意let b4str = ooo.split("").map(x => this.dec[x]).join("")let utf8arr = []// 每次解析4个字符// 记住增加前导0的填充for (let i = 0; i < b4str.length; i += 4) utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))// 返回解码后的字符串return this.Utf8ArrayToStr(utf8arr) 最初
到此就外围实现代码就分享完结了，看完是不是感觉并没有很简单，基于此设计或者能够延长出其余的字符成果，有趣味的也能够试试看。将转码后的地址分享给你的敌人们肯定会带来不一样的惊喜。
官网地址：「ooooooooooooooooooooooo.ooo」
上面是我转换的一个AI小工具地址，点击看看成果吧~
ooooooooooooooooooooooo.ooo/ooooooooooooooooooo
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）