JavaScript URL-Safe Filename-Safe 字符串

在许多 Web 开发场景中，需要使用 URL 安全（URL-safe）和文件名安全（Filename-safe）的字符串。这些字符串可以被安全地嵌入到 URL、文件名或者其他一些上下文中。在这篇文章中，我们将介绍如何使用 JavaScript 来创建 URL-safe 和 Filename-safe 的字符串。

URL-Safe 字符串

URL-safe 字符串是指能够安全传输和显示在 URL 中的字符串。为了达到这个目的，我们需要确保字符串中只包含 URL-safe 字符。在 ASCII 码表中，以下字符是被允许出现在 URL 中的：

• 大小写字母：A–Z，a–z
• 数字：0–9
• 标点符号：-，_，.，~（连字符、下划线、句点和波浪线）

除了这些字符以外，其他的字符必须使用 URL 编码进行转义。

JavaScript 提供了一个函数 encodeURIComponent() 来对字符串进行 URL 编码。这个函数可以把一个字符串中所有非 URL-safe 字符都替换成 % 符号后面跟着两个十六进制数字表示它们的编码。例如：

const str = 'Hello, world! 你好，世界！'
const urlEncodedStr = encodeURIComponent(str)
console.log(urlEncodedStr) // "Hello%2C%20world%21%20%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81"

在上面的例子中，所有空格、逗号和汉字都被转义成了它们的编码形式。

如果你需要对整个 URL 进行编码而不是只对其中的某个参数进行编码，可以使用 encodeURI() 函数。这个函数会把 URL 中一些特殊字符替换成它们的编码形式，例如 # 变成 %23，但是它不会对斜杠 / 进行编码。例如：

const url = 'https://www.example.com/search?q=Hello, world! 你好，世界！'
const encodedUrl = encodeURI(url)
console.log(encodedUrl) // "https://www.example.com/search?q=Hello,%20world!%20%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81"

Filename-Safe 字符串

Filename-safe 字符串是指能够安全作为文件名使用的字符串。与 URL-safe 字符串类似，我们需要确保只使用 Filename-safe 字符。在 Windows 和 macOS 文件系统中，以下字符是不允许出现在文件名中的：

• /，\，:，*，?，"，<，>，|`

在 Linux 文件系统中，还需要避免使用 / 字符作为文件名的开头。因此，为了创建一个 Filename-safe 字符串，我们需要将上述字符都替换成其他字符。

一个常见的方法是使用连字符 - 来代替空格和其他不安全字符。另外，我们还可以使用下划线 _ 或者点号 . 来代替斜杠 / 和冒号 :。这些字符都是 Filename-safe 的。

在 JavaScript 中，可以使用正则表达式来替换不安全字符。例如，以下代码会把所有不安全字符都替换成连字符：

const filename = 'Hello, world! 你好，世界！.txt'
const safeFilename = filename.replace(/[\/\\:*?"<>|]/g, '-')
console.log(safeFilename) // "Hello,-world!--.txt"

总结

在 Web 开发中，创建 URL-safe 和 Filename-safe 字符串是一项重要的任务。对于 URL-safe 字符串，我们可以使用 encodeURIComponent() 和 `

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27172