前端(JS)對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼

工作記錄-前端——前端(JS)對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼

  • 創作場景
  • 前端JS對URL的三種編碼和解碼方式
    • 1. escape 和 unescape
    • 2. encodeURI 和 decodeURI
    • 3. encodeURIComponent 和 decodeURIComponent
  • 本文重點

創作場景

???工作中遇到了一個帶中文的URL鏈接,因為是文件預覽,在文件名為uuid的情況下需要將中文名展示在導航欄,所以將文件中文名拼接在了URL后面,但是出現了IE報400錯誤的情況,經過排查是URL帶中文的問題,特此記錄。

前端JS對URL的三種編碼和解碼方式

1. escape 和 unescape

???這兩個一般是用于對某個變量進行編碼的,無法直接作用與URL除了ASCII字母、數字、標點符號"@ * _ + - . /"以外,對其他所有字符進行編碼。在u0000到u00ff之間的符號被轉成%xx的形式,其余符號被轉成%uxxxx的形式。對應的解碼函數是unescape()

???一般這個是不常用的,不過對于變量進行編碼的時候要注意,如果變量中有特殊符號+會自動編碼為空格

2. encodeURI 和 decodeURI

???這兩個是對特殊含義的符號"; / ? : @ & = + $ , #",也不進行編碼。主要對URL進行部分編碼,編碼后,它輸出符號的utf-8形式,并且在每個字節前加上%。它對應的解碼函數是decodeURI(),一般在URL中我們常常使用的就是這個,而且大多數情況都是對鏈接中拼接對象時進行編碼,接收時進行解碼。

3. encodeURIComponent 和 decodeURIComponent

???與encodeURI()的區別是,它用于對整個URL進行編碼。“; / ? : @ & = + $ , #”,這些在encodeURI()中不被編碼的符號,在encodeURIComponent()中統統會被編碼。它對應的解碼函數是decodeURIComponent()。這種適用場景比較少,一般我們的鏈接除了對象和中文外都需要暴露在外面以便用戶查看和復制。

???以上就是前端中常用的三類編碼和解碼方式,當然也都比較常見,如果需要將中文傳遞給后臺,一般也需要進行編碼,而后臺也有對應的解碼方法,這里就不做贅述了。

本文重點

???一定要養成一個好習慣,如果URL中出現了中文,一定要使用編碼方法進行編碼,雖然現在的瀏覽器大多數都進行了兼容處理,對于一些老舊的瀏覽器比如IE或者一些平板啊手機都會出現不兼容報錯的情況,而400錯誤大多數情況就是我們的URL錯誤啦,而有時候可能不是拼接問題,編碼也會影響。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/20286.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/20286.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/20286.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

net語言編程:深入探索其奧秘與挑戰

net語言編程:深入探索其奧秘與挑戰 在當今信息化社會,編程語言如同構建數字世界的磚瓦,而net語言編程便是其中的一顆璀璨明珠。它以其獨特的魅力吸引著無數開發者,但同時也伴隨著一系列令人困惑和充滿挑戰的問題。本文將從四個方…

大模型學習資料整理:如何從0到1學習大模型,搭建個人或企業RAG系統,如何評估與優化(更新中...)

通過本文您可以了解到: 學習:從小白如何入手,從0到1開始學習大模型。RAG系統:我想搭建屬于自己或者企業的RAG系統,我該怎么去做?評估:微調后的模型或者RAG系統,如何評估自己的模型和…

windows配置dns訪問git , 加快訪問速度保姆級教程

設置 DNS 訪問 Git 需要修改電腦的 DNS 配置。下面是具體的操作流程: 第一步:打開命令提示符或終端窗口 在 Windows 系統中,可以按下 Win R 組合鍵,然后輸入 “cmd”,按下 Enter 鍵打開命令提示符窗口。在 macOS 或 …

【活動】GPT-4O:AI語言生成技術的新里程碑

🌈個人主頁: 鑫寶Code 🔥熱門專欄: 閑話雜談| 炫酷HTML | JavaScript基礎 ?💫個人格言: "如無必要,勿增實體" 文章目錄 GPT-4O:AI語言生成技術的新里程碑引言GPT系列簡史回顧GPT-1: 初露鋒…

國際薦酒師(香港)協會亮相香港國際葡萄酒和烈酒展覽會

2024年5月28日至30日,備受矚目的香港國際葡萄酒和烈酒展覽會VINEXPO Hong Kong在香港盛大舉辦。作為亞太區最盛大的葡萄酒展會,本屆展會不僅吸引了全球葡萄酒和烈酒行業的目光,更見證了國際薦酒師(香港)協會&#xff0…

(2) qml誕生的原因 和Qt Creator開發環境的介紹

文章目錄 qml誕生原因Qt Quick應?程序Qt Creator環境1、MSVC2、MinGWMSVC的優缺點MinGW的優缺點 最后的選擇延伸閱讀 一些常用的快捷鍵統一格式化代碼統一qml 語言的格式Locator 定位器幫助 qml誕生原因 可以在Qt5中開發的不同類型的經典應?程序。桌?應?程 序正在發?著改…

物聯網斷點續傳

斷點續傳是一種在網絡傳輸中斷后,能夠從中斷的位置繼續傳輸的技術。它可以有效地避免因為網絡不穩定、服務器故障、用戶操作等原因導致的傳輸失敗,節省了用戶的時間和流量,提高了傳輸的效率和可靠性。斷點續傳在很多場景中都有廣泛的應用&…

GIS結合物聯網:塑造智慧地球的新篇章

在信息技術飛速發展的今天,地理信息系統(GIS)與物聯網(IoT)的深度融合,正以前所未有的方式重塑著我們對世界的認知。本文將深入探討GIS與物聯網結合的原理、應用實踐以及面臨的挑戰與未來展望,共…

鄉村振興與鄉村旅游品牌化:打造具有地方特色的鄉村旅游品牌,提升鄉村旅游吸引力,促進美麗鄉村建設

目錄 一、引言 二、鄉村旅游品牌化的重要性 (一)增強鄉村旅游的辨識度 (二)提升鄉村旅游的附加值 (三)促進鄉村文化的傳承與創新 三、打造具有地方特色的鄉村旅游品牌 (一)明…

Python知識點6---列表和元組

提前說一點:如果你是專注于Python開發,那么本系列知識點只是帶你入個門再詳細的開發點就要去看其他資料了,而如果你和作者一樣只是操作其他技術的Python API那就足夠了。 Python的列表和和元組定義方式如下,且注意列表和元組擁有…

【深度強化學習入門:結合直覺與算法的學習之旅】

文章目錄 前言深度強化學習的關鍵要素簡單的深度Q網絡(DQN)實現分析代碼結論 前言 深度強化學習結合了深度學習的表征學習能力和強化學習的決策制定機制,這使得機器能夠在復雜環境中自我學習并做出合理的行動策略。它在游戲玩耍、自動駕駛、…

Linux實驗報告(二)——Linux系統中的常用命令

目錄 一、實驗名稱: 二、儀器、設備: 三、參考資料: 四、實驗目的: 五、實驗內容(步驟): 六、實驗數據(程序)記錄: ?編輯 ?編輯 七、實驗結果分析…

Python知識點9---推導式

提前說一點:如果你是專注于Python開發,那么本系列知識點只是帶你入個門再詳細的開發點就要去看其他資料了,而如果你和作者一樣只是操作其他技術的Python API那就足夠了。 Python提供的推導式,只對列表、字典、集合三種數據類型生…

公司網站模板制作

公司網站模板的制作是一項極其重要的工作,因為網站模板決定了網站的整體風格和用戶體驗。一個漂亮、易用的網站模板將會吸引更多的用戶,而一個糟糕的網站模板則會讓用戶不供選擇。下面就讓我們介紹一下公司網站模板的制作。 首先,一個好的網站…

iCold編程入門:探索未知的編程世界

iCold編程入門:探索未知的編程世界 在浩瀚的數字宇宙中,iCold編程猶如一顆璀璨的新星,吸引著無數好奇而勇敢的探險家。然而,對于初學者來說,這個神秘的世界往往充滿了未知與挑戰。今天,我們就將一同踏入這…

前端 CSS 經典:mac docker 效果

前言:瀏覽器上實現 mac docker 效果,實現思路,1. 布局,方框間距用元素代替,因為有放大縮小功能,不用元素的話,不好控制。2. 定義個 css 變量 i,用來代表放大比例。3. 確定每個元素的…

信息系統項目管理師軟考高級論文教程必過論文分享

很多人提到軟考就會想到信息系統項目管理師和系統集成項目管理工程師,這兩個不同的軟考內容的區別不僅僅在于一個是高級,一個是中級,還有一個區別是它們的考試內容也是不同的,高級的信息系統項目管理師考試多了一項論文的考試&…

K-means 聚類算法和K-means ++聚類算法詳解【5】

1、通俗易懂的講解鏈接 補充鏈接,K- means算法的K值選擇策略:鏈接一,鏈接二???????; 后續關鍵點漸次補充

MySQL入門學習-查詢進階.正則表達式

在 MySQL 中,正則表達式是用于匹配文本模式的工具。正則表達式可以用于在查詢中進行模式匹配,以便更精確地查找和操作數據。 一、以下是一些常見的查詢進階操作和正則表達式的特點、使用方法以及與其他比較和高級應用的示例: 1. LIKE操作符…

USART串口數據包

USART串口數據包 先來看兩張圖,本次程序是串口收發HEX數據包,第二種是串口收發文本數據包,之后兩個圖,展示的就是接收數據包的思路。 在PB1這里接了一個按鍵,用于控制。在串口助手,在發送模式和接收模式都…