JavaScript URL编码示例–如何使用encodeURIcomponent（）和encodeURI（）

You might think that encodeURI and encodeURIComponent do the same thing, at least from their names. And you might be confused which one to use and when.

您可能会认为， encodeURI和encodeURIComponent至少在它们的名称上具有相同的作用。 您可能会感到困惑，何时使用。

In this article, I will demystify the difference between encodeURI and encodeURIComponent.

在本文中，我将揭开encodeURI和encodeURIComponent之间的区别。

什么是URI，它与URL有何不同？ (What is a URI and how is it different from a URL?)

URI stands for Uniform Resource Identifier. URL stands for Uniform Resource Locator.

URI代表统一资源标识符。 URL代表统一资源定位符。

Anything that uniquely identifies a resource is its URI, such as id, name, or ISBN number. A URL specifies a resource and how it can be accessed (the protocol). All URLs are URIs, but not all URIs are URLs.

唯一标识资源的是其URI，例如ID，名称或ISBN号。 URL指定资源及其访问方式(协议)。 所有URL都是URI，但并非所有URI都是URL。

为什么我们需要编码？ (Why do we need to encode?)

URLs can only have certain characters from the standard 128 character ASCII set. Reserved characters that do not belong to this set must be encoded.

URL只能包含标准128字符ASCII集中的某些字符。 不属于此集合的保留字符必须进行编码。

This means that we need to encode these characters when passing into a URL. Special characters such as &, space, ! when entered in a url need to be escaped, otherwise they may cause unpredictable situations.

这意味着我们在传递到URL时需要对这些字符进行编码。 特殊字符，例如& ， space ， ! 输入网址时需要转义，否则可能会导致无法预料的情况。

Use cases:

用例：

1. User has submitted values in a form that may be in a string format and need to be passed in, such as URL fields.
   用户提交的值的格式可能是字符串格式，需要传递，例如URL字段。
2. Need to accept query string parameters in order to make GET requests.
   需要接受查询字符串参数才能发出GET请求。

encodeURI和encodeURIComponent有什么区别？ (What is the difference between encodeURI and encodeURIComponent?)

encodeURI and encodeURIComponent are used to encode Uniform Resource Identifiers (URIs) by replacing certain characters by one, two, three or four escape sequences representing the UTF-8 encoding of the character.

encodeURI和encodeURIComponent用于通过用表示字符的UTF-8编码的一个，两个，三个或四个转义序列替换某些字符来对统一资源标识符(URI)进行编码。

encodeURIComponent should be used to encode a URI Component - a string that is supposed to be part of a URL.

应使用encodeURIComponent对URI 组件进行编码-假定为URL一部分的字符串。

encodeURI should be used to encode a URI or an existing URL.

应使用encodeURI对URI或现有URL进行编码。

Here's a handy table of the difference in encoding of characters

这是一个方便的表格，显示字符编码的差异

哪些字符被编码？ (Which characters are encoded?)

encodeURI() will not encode: ~!@#$&*()=:/,;?+'

encodeURI()将不会编码： ~!@#$&*()=:/,;?+'

encodeURIComponent() will not encode: ~!*()'

encodeURIComponent()不会编码： ~!*()'

The characters A-Z a-z 0-9 - _ . ! ~ * ' ( ) are not escaped.

字符AZ az 0-9 - _ . ! ~ * ' ( ) AZ az 0-9 - _ . ! ~ * ' ( ) AZ az 0-9 - _ . ! ~ * ' ( )不转义。

例子 (Examples)

const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

何时编码 (When to encode)

1. When accepting an input that may have spaces.

   接受可能有空格的输入时。

   encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.html

2. When building a URL from query string parameters.

   从查询字符串参数构建URL时。

   let param = encodeURIComponent('mango')
    let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99

3. When accepting query parameters that may have reserved characters.

   接受可能带有保留字符的查询参数时。

let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple

摘要 (Summary)

If you have a complete URL, use encodeURI. But if you have a part of a URL, use encodeURIComponent.

如果您有完整的URL，请使用encodeURI 。 但是，如果您有URL的一部分，请使用encodeURIComponent 。

---

---

Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter

对我的更多教程和JSBytes感兴趣吗？ 订阅我的时事通讯。 或在Twitter上关注我

翻译自: https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/