Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use the URL object in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the URL object in JavaScript.

Catalogue

Preface

Analytical parameter

Modify URL parameters

Preface

URL objects may be less used on the page end. Generally speaking, most of the page-end operations on URL are to parse URL parameters, and there are more libraries to choose from for parsing URL parameters, such as qs, or using browser native URLSearchParams.

/ / assume that the current url is' https://www.test.com?a=1&b=2'const b = new URLSearchParams (location.search); const aParam = b.get ('a'); / / 1const bParam = b.get ('b'); / / 2const entries = [... b] / / [['await,' 1'], ['baked,' 2'] / / if you want to get an object like qs.parse, you can do this: const params = Object.fromEntries (entries); / / {a: 'centering, b:' 2'} parsing parameters

Parsing parameters through URLSearchParams does not seem to have much to do with the object URL, but you can take a look at the object returned after the URL object is instantiated

Const a = new URL ('https://www.test.com?a=1&b=2'); / / hash: "" / / host: "www.test.com" / / hostname: "www.test.com" / / href: "https://www.test.com/?a=1b=2"// origin:" https://www.test.com"// password: "" / / pathname: "/" / port: "" / / protocol: "https:" / / search: "? a=1&b=2" / / searchParams: URLSearchParams {} / / username: "/ / [Prototype]: URL

As you can see from the returned object, after the URL is instantiated, the property searchParams returned is actually an instantiated URLSearchParams object. Therefore, there is also a way to obtain parameters through the URL object. For example, the above operation can be changed.

For the faded parsing parameters, there is no need to use URL. Using URLSearchParams this object is completely sufficient. Then what else can this URL object do? in fact, you can think about the fact that URLSearchParams actually provides set append write operations. At the same time, the properties returned by URL object can also be modified. Can you modify a URL or generate a URL by modifying the parameters in URL? after all, a lot of times. The modification of URL stays on the string operation, and it is also very dangerous to operate, and it is easy to report errors.

Const a = newURL ('https://www.test.com?a=1&b=2');a.searchParams.set('a',' 18'); a.searchParams.set ('baked,' 14'); a.searchParams.set ('cased,' test'); let newURL = a.toString (); / / https://www.test.com/?a=18&b=14&c=testa.hash = 'hasha';newURL = a.toString () / / 'https://www.test.com/?a=18&b=14&c=test#hasha'a.host =' www.init.com';newURL = a.toString () / / https://www.init.com/?a=18&b=14&c=test#hasha Thank you for your reading, the above is the content of "how to use URL objects in JavaScript". After the study of this article, I believe you have a deeper understanding of how to use URL objects in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.