With the ever-increasing presence of web-tech, we generally see increasingly more want for encoding and decoding information in a protected and standardized method. 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 check.asp?title=ståle&automobile=saab";
let res = encodeURIComponent(uri);
console.log(res);
// Output: mypercent20test.asppercent3Fnamepercent3DstpercentC3percentA5lepercent26carpercent3Dsaab
Within the code snippet above, you may see the encodeURIComponent() perform in motion, remodeling the given URI string into an encoded model.
Word: Remember, encodeURIComponent() encodes not solely characters that aren’t legitimate in URLs, but in addition some characters which have particular which means in a URL (like &, =, :, /, + and so on.). That is what makes this perform extra aggressive than encodeURI(), which does not encode characters with particular which means.
Let’s perceive this higher with an instance.
let uri = "/api/check?title=John Doe&age=25";
let uriComponent = "John Doe&age=25";
let encodedURI = encodeURI(uri);
let encodedURIComponent = encodeURIComponent(uriComponent);
console.log(encodedURI);
// Output: /api/check?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 vital once you’re constructing URLs with dynamic information, for instance. When the server receives this URL, it is going to decode the URL and interpret the parameters appropriately, avoiding potential points.
One other use case for encodeURIComponent() is once you’re coping with AJAX requests. Once you’re sending information to the server utilizing GET methodology, 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 engines like google. For instance, Google’s URL format for his or her search perform is https://google.com/search?q={question}. So in case 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/check?title=" + encodeURIComponent(userName) + "&age=" + age;
// The ultimate URL will likely be: "/api/check?title=Johnpercent20Doe&age=25"
On this situation, if the userName variable incorporates 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 vital to keep in mind that it shouldn’t be used on your entire URL, however relatively on particular person URI parts. Making use of it to your entire URL can lead to ncoding characters that are supposed to retain their particular meanings, like : or / in https://.
Conclusion
JavaScript’s encodeURIComponent() perform is a crucial instrument in an internet developer’s arsenal, facilitating protected and correct information switch. By encoding particular person URI parts, it ensures that data is appropriately interpreted by servers, thus avoiding potential errors and preserving the integrity of the information.
