JS常用DOM对象Window API

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

JS 常用编码类 window API

[TOC]

## 1. 编码

### 1.1. base64编码与解码

btoa()将内容进行base64编码，这个内容只能是符合ASCII编码的内容

```JS
function strCode(){
    let a = "nihao"
    console.log(window.btoa(a)) // 输出：bmloYW8=
}
strCode()
```

> **Tips：**
> atob方法和btoa方法都不支持中文，且中文标点符号也不支持，使用btoa对中文或中文标点符号进行base64码会报下面的错误

> ```TEXT
VM56:3 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
```

**<span id="atob-chinese">兼容中文的处理方式：</span>**对内容进行`encodeURIComponent()`编码，编码过后都是符号ASCII编码的内容了，再对内容进行`atob`编码后，

```JS
function strCode(){
    let a = "你好中国！"
    console.log(window.btoa(encodeURIComponent(a)))
    // 输出：JUU0JUJEJUEwJUU1JUE1JUJEJUU0JUI4JUFEJUU1JTlCJUJEJUVGJUJDJTgx
}
strCode()
```

atob()将经过base64编码的内容进行解码，这个内容只能是符合ASCII编码的内容

```JS
function strUnCode(){
    let a = "bmloYW8="
    console.log(window.atob(a)) // 输出：nihao
}
strUnCode()
```

> **Tips：**
> 如果base64中含有中文，或中文标点符号，使用atob解码后会出现乱码

**兼容中文的处理方式：**对内容进行`atob`解码后，在对内容进行`decodeURIComponent()`解码，这种解码必须配合上面的[中文编码](#atob-chinese)才有效

```JS
function strunCode(){
    let a = "JUU0JUJEJUEwJUU1JUE1JUJEJUU0JUI4JUFEJUU1JTlCJUJEJUVGJUJDJTgx"
    console.log(decodeURIComponent(window.atob(a))) // 输出：你好中国！
}
strunCode()
```

### 1.3. URI编码与解码

在 JavaScript 中，可以使用 `encodeURIComponent()` 函数对参数进行编码，使用 `decodeURIComponent()` 进行解码：

```javascript
// 原始参数
const originalParam = "AAO+q0jeAAIAAW8/9jzLFA==";

// 编码参数
const encodedParam = encodeURIComponent(originalParam);
console.log(encodedParam);
// 输出: "AAO%2Bq0jeAAIAAW8%2F9jzLFA%3D%3D"

// 此时可以安全地将 encodedParam 作为路径参数传递

// 后端接收后需要解码
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam);
// 输出: "AAO+q0jeAAIAAW8/9jzLFA==" (恢复原始值)
```

编码后，特殊字符会被转换为 `%` 加十六进制值的形式：
- `+` 会被编码为 `%2B`
- `/` 会被编码为 `%2F`
- `=` 会被编码为 `%3D`

这样处理后，参数就能安全地作为 URL 路径的一部分进行传递，不会引发解析错误。需要注意的是，**后端接收时需要进行对应的解码操作**才能得到原始值。