With the ever-increasing presence of web-tech, we generally see an increasing number of want for encoding and decoding information in a protected and standardized means. That is the place JavaScript’s encodeURIComponent() perform comes into the image. This perform encodes a URI (Uniform Useful resource Identifier) part by changing sure characters with corresponding hexadecimal escape sequences.
let uri = "my take a look at.asp?title=ståle&automobile=saab";
let res = encodeURIComponent(uri);
console.log(res);
// Output: mypercent20test.asppercent3Fnamepercent3DstpercentC3percentA5lepercent26carpercent3Dsaab
Within the code snippet above, you will see the encodeURIComponent() perform in motion, reworking the given URI string into an encoded model.
Word: Take note, encodeURIComponent() encodes not solely characters that aren’t legitimate in URLs, but additionally some characters which have particular that means in a URL (like &, =, :, /, + and so forth.). That is what makes this perform extra aggressive than encodeURI(), which does not encode characters with particular that means.
Let’s perceive this higher with an instance.
let uri = "/api/take a look at?title=John Doe&age=25";
let uriComponent = "John Doe&age=25";
let encodedURI = encodeURI(uri);
let encodedURIComponent = encodeURIComponent(uriComponent);
console.log(encodedURI);
// Output: /api/take a look at?title=Johnpercent20Doe&age=25
console.log(encodedURIComponent);
// Output: Johnpercent20Doepercent26agepercent3D25
Within the instance above, you will note that the encodeURIComponent() perform has encoded the & character, in contrast to encodeURI(). This conduct is necessary if you’re constructing URLs with dynamic information, for instance. When the server receives this URL, it’ll decode the URL and interpret the parameters appropriately, avoiding potential points.
One other use case for encodeURIComponent() is if you’re coping with AJAX requests. If you’re sending information to the server utilizing GET technique, it is fairly widespread to append information to the URL as question parameters. If these parameters include particular characters or areas, it is necessary to encode these characters to make sure they’re interpreted appropriately by the server.
An instance of this may be seen in search engines like google. For instance, Google’s URL format for his or her search perform is https://google.com/search?q={question}. So when you needed to seek for “StackAbuse is nice 👍”, the ensuing URL, utilizing encodeURIComponent, can be https://google.com/search?q=StackAbusepercent20ispercent20greatpercent20percentF0percent9Fpercent91percent8D.
Let’s check out one other instance:
let userName = "John Doe";
let age = 25;
let url = "/api/take a look at?title=" + encodeURIComponent(userName) + "&age=" + age;
// The ultimate URL might be: "/api/take a look at?title=Johnpercent20Doe&age=25"
On this state of affairs, if the userName variable comprises any particular characters or areas, they are going to be appropriately encoded, guaranteeing that the server interprets the URL as supposed.
Word: Whereas encodeURIComponent() may be very helpful, it is necessary to keep in mind that it shouldn’t be used on all the URL, however reasonably on particular person URI elements. Making use of it to all the URL may end up in ncoding characters that are supposed to retain their particular meanings, like : or / in https://.
Conclusion
JavaScript’s encodeURIComponent() perform is a vital software in an online developer’s arsenal, facilitating protected and correct information switch. By encoding particular person URI elements, it ensures that info is appropriately interpreted by servers, thus avoiding potential errors and preserving the integrity of the information.
