Simple and clear distinction between escape, encodeURI and encodeURIComponent

This article mainly introduces the differences between escape, encodeURI and encodeURIComponent. Friends in need can refer to it

1. Foreword

Let’s talk about the differences between these three methods There are too many articles, but most of them are very convoluted. This article attempts to explain these three methods from a practical perspective.

2. Escape is not of the same type as them

Simply speaking, escape encodes a string (while the other two encode URLs). The purpose is to make them readable on all computers.
The result after encoding is in the form of %XX or %uXXXX.
Among them, ASCII letters, numbers, and @*/ will not be encoded, but the rest will.
The most important thing is that when you need to encode the URL, please forget this method. This method is used for strings, not for URLs.
In fact, I have not used this method in actual work, so I won’t go into details.

3. The most commonly used encodeURI and encodeURIComponent

It is common to encode URLs, so these two methods should be paid special attention to in practice.
They are all encoded URLs. The only difference is the encoded character range. The
encodeURI method will not encode the following characters: ASCII letters, numbers, ~!@#$&*()=:/,;? '
The encodeURIComponent method will not encode ASCII letters, numbers, ~!*()'
for the following characters, so encodeURIComponent has a wider encoding range than encodeURI.
As a practical example, encodeURIComponent will encode http:// into http:// but encodeURI will not.

4. The most important thing is, what method should I use in what situation?

The difference is very clear. Let’s talk about it from a practical example. Bundle.

1. If it is just an encoded string and has nothing to do with the URL, then use escape.
2. If you need to encode the entire URL and then use this URL, use encodeURI.

For example,

encodeURI("//m.sbmmt.com/season-huang/some other thing");

will become

"//www.m.sbmmt.com/season-huang/some%20other%20thing";

after encoding. Among them, spaces are encoded into . But if you use encodeURIComponent, the result becomes:

"http://www.jb51.net/season-huang/some other thing"

Do you see the difference, even" /" are all encoded, and the entire URL is no longer usable.

3. When you need to encode parameters in the URL, encodeURIComponent is the best way.

var param = "//m.sbmmt.com/season-huang/"; //param为参数
param = encodeURIComponent(param);
var url = "//m.sbmmt.com?next=" + param;
console.log(url) ////m.sbmmt.com?next=http%3A%2F%2Fwww.jb51.net%2Fseason-huang%2F

I saw it, the "/" in the parameter can be encoded. If you use encodeURI, there will definitely be a problem, because the following / needs to be encoded.

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!

The above is the detailed content of Simple and clear distinction between escape, encodeURI and encodeURIComponent. For more information, please follow other related articles on the PHP Chinese website!