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])。
str.padStart(4, "0")
下面正式開始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這個字符：
[ 104, 116, 116, 112 ]["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ο?οoο?οoο?oo到此整個轉換編碼的過程就結束了，看完后是不是覺得設計的很不錯，編碼完后就是解碼，解碼就是將上面的過程倒序來一遍，恢復到最原始的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) 到此就核心實現代碼就分享結束了，看完是不是感覺并沒有很復雜，基于此設計或許可以延伸出其他的字符效果，有興趣的也可以試試看。將轉碼后的地址分享給你的朋友們一定會帶來不一樣的驚喜。
下面是我轉換的一個AI小工具地址，點擊看看效果吧~
ooooooooooooooooooooooo.ooo/ooooοооoο?ο…
標簽：
這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助發現一個很有創意的小工具網站，如封面圖所
梅西中國行2023門票在哪買？（1）掃描二維碼至票星球微信小程序購買（2）票星球App登錄購買（各大應用市場
合肥城建：全資子公司擬通過增資擴股引入投資者奔匯投資 【合肥城建：全資子公司擬通過增資擴股引入投
初次認識溫智淞的時候他還是一名初露鋒芒的大二學生，參與創作表演的情景歌舞《瓦西里的故事》在中央電視臺
利通電子（SH603629，收盤價：27 03元）6月2日晚間發布公告稱，江蘇利通電子股份有限公司股票于2023年5月31
5月31日晚8點京東618全面開啟，攜手廠商合作伙伴為用戶提供海量超值好物與貼心服務，帶來“多、快、好、省
原標題：探索“家庭保護”新模式促“案結事了家和”北京市高級人民法院未成年人案件綜合審判庭庭長陳偉紅北
人民網重慶6月2日電(陳琦)近日，經過4小時30分鐘，重慶愛心小伙沅朗(化名)成功在定點采集醫院成功捐獻造血
北京龐各莊西瓜種植歷史已有600多年，是北京特色產業。
馬龍：已不必每場都稱贊小波特防守了他做了我們需要他做的一切,小波特,熱火隊,乒乓球比賽,nba總決賽,奧林匹
換新貌，待客來_當前報道
6月2日，青島市北區登州路啤酒街上，全新的店招門頭展現著啤酒街改造中的新貌。為了讓啤酒街的功能、空間和
快看點丨融法于景，潤物無聲！李滄區
為深入貫徹落實“八五”普法規劃，創新青少年法治教育形式，提高法治教育質效。6月2日，李滄區司法局在象耳
膠州市稅務局多措并舉 推動民法典宣
半島網6月2日訊（記者李京媛）今年5月是全國第三個民法典宣傳月，為進一步加大民法典宣傳力度，對內提高稅
焦點熱訊:“舌尖”上的臺東
6月2日，臺東步行街恣兒街里人來人往，許多年輕人來到這里休閑游玩，品嘗美味小吃。自恣兒街全新改造以來，
山東龍大美食股份有限公司突然整體關
半島網6月2日訊近日，半島網記者收到來自山東龍大美食股份有限公司（以下簡稱龍大美食）青島辦公室員工的投
廣東2a的學校_廣東2A類學校有哪些
大家好，小石來為大家解答以上問題。廣東2a的學校，廣東2A類學校有哪些這個很多人還不太了解，現在一起來瞧
全球觀熱點：生查子·游雨巖_關于生
生查子·游雨巖，關于生查子·游雨巖介紹這個很多人還不知道,我們一起來看看！1、《生查子·游雨巖》是宋代
天天觀察：麥迪：我在13馬刺毫無貢獻
近日，NBA名宿麥迪接受了RachelNichols的采訪。談到自己的總決賽經歷時，麥迪表示：“我為波波效力過，但我
6+3復式，8+3復式，集齊亮相，大樂透
彩票圈子里單式票也好，復式票也罷，想要擒獲所謂的一等獎，都難如登天，大海撈針一樣困難，盲目購彩只會讓
環球聚焦：兩地通勤特省心！莞惠城際
兩地通勤特省心！莞惠城際鐵路5月到發旅客超百萬記者從廣鐵集團獲悉，今年5月，莞惠城際鐵路客流呈現快速回
廣東省會計中級資格考試考生，請及時
廣東省會計中級資格考試考生，請及時更新會計人員信息文 羊城晚報全媒體記者莫謹榕6月2日，羊城晚報記者從
水滸傳吳用的故事情節概括及其性格特
想必現在有很多小伙伴對于水滸傳吳用的故事情節方面的知識都比較想要了解，那么今天小好小編就為大家收集了
速訊：生查子·漫天春雪來_關于生查
生查子·漫天春雪來，關于生查子·漫天春雪來介紹這個很多人還不知道,我們一起來看看！1、《生查子·漫天春
天天頭條：廣州隊球員凌杰社媒發文：
廣州隊球員凌杰社媒發文：做好最艱難的準備，好運6月直播吧6月2日訊廣州隊球員凌杰今天在社媒曬球隊的照片
香洲區疾病預防控制局，掛牌成立！
香洲區疾病預防控制局，掛牌成立！5月31日，香洲區疾病預防控制局掛牌儀式舉行，市衛生健康局局長徐超龍、
全球報道:關于魚兒的句子唯美_關于魚
大家好，小石來為大家解答以上問題。關于魚兒的句子唯美，關于魚兒的句子這個很多人還不太了解，現在一起來
松下確認將在美國建設第三家電池工廠
據美媒AutomotiveNews報道，松下能源CEO只信一生在昨日的公司年度業務戰略會議上發表了講話，并確認松下將
全球微動態丨不讓麥子生芽 駐馬店上
大象新聞記者王向鋒6月1日，為趕在雨前讓已經收獲的小麥能夠及時晾曬，防止生芽，駐馬店上蔡縣9個公路道班
【全球獨家】新婚俗正在成為新潮流
【新婚俗正在成為新潮流】沒有了“天價”彩禮、豪車迎親，也沒有山珍海味，取而代之的是騎自行車帶著新娘子
當前焦點!RCEP全面生效首票貨物從深
RCEP全面生效首票貨物從深圳通關深圳海關關員在皇崗口岸監管RCEP全面生效首票貨物通關。深圳海關供圖人民網
安徽廬江：麥收時節搶豐糧
安徽廬江：麥收時節搶豐糧
活動預告！下周四“e路紅帆”講壇力
半島網6月2日訊（記者孫貼靜）如何從0到1打造出爆款產品？作為新消費品牌，“小伶鼬”如何成為風靡全網的網
生查子·靈武寒夜_關于生查子·靈武
生查子·靈武寒夜，關于生查子·靈武寒夜介紹這個很多人還不知道,我們一起來看看！1、《生查子·靈武寒夜》
山東龍大美食股份有限公司突然整體關
半島網6月2日訊近日，半島網記者收到來自山東龍大美食股份有限公司（以下簡稱龍大美食）青島辦公室員工的投
三人籃球世界杯：中國女籃21-7打爆羅
北京時間6月2日消息，2023國際籃聯三人籃球世界杯今天繼續進行，經過一天的休整，中國三人籃球國家女隊狀態
文博會深圳濱海藝術中心分會場：打造
文博會深圳濱海藝術中心分會場：打造“灣區·視界”國際舞臺文化藝術精品交易會文博會分會場作為文博會的重
董勇貴_關于董勇貴的簡介
音頻解說1、董勇貴，現任福建省漳州市云霄縣人大常委會副主任。?本文關于董勇貴的簡介就講解完畢，希望對
天天短訊！異地就醫更有“醫靠” ！
為進一步推動跨省異地就醫直接結算工作落實落地、提高社會公眾政策知曉度，提升人民群眾異地就醫結算的獲得
當前快報:世聯賽兩連勝！中國女排3比
6月2日，2023年世界女排聯賽名古屋站繼續進行，中國女排3比0戰勝德國女排，取得兩連勝。本場比賽，中國女排
環球速訊：6月廣州擬配置中小客車增
6月廣州擬配置中小客車增量指標共30541個2日，廣州市中小客車指標調控管理辦公室發布關于2023年6月份廣州市