URL是浏览器原生提供的对象,同时也是一个构造函数,可以用来构造、解析和编码 URL。一般情况下,通过window.URL可以拿到。

构造函数

URL作为构造函数,可以生成 URL 实例。它接受一个表示 URL 的字符串作为参数。如果参数不是合法的 URL,会报错。

  1. var url = new URL('http://www.example.com/index.html');
  2. url.href
  3. // "http://www.example.com/index.html"

如果参数是另一个 URL 实例,构造函数会自动读取该实例的href属性,作为实际参数。
如果 URL 字符串是一个相对路径,那么需要表示绝对路径的第二个参数,作为计算基准。

  1. var url1 = new URL('index.html', 'http://example.com');
  2. url1.href
  3. // "http://example.com/index.html"
  4. var url2 = new URL('page2.html', 'http://example.com/page1.html');
  5. url2.href
  6. // "http://example.com/page2.html"
  7. var url3 = new URL('..', 'http://example.com/a/b.html')
  8. url3.href
  9. // "http://example.com/"

实例属性

URL 实例的属性与Location对象的属性基本一致,返回当前 URL 的信息。

  • URL.href:返回整个 URL
  • URL.protocol:返回协议,以冒号:结尾
  • URL.hostname:返回域名
  • URL.host:返回域名与端口,包含:号,默认的80和443端口会省略
  • URL.port:返回端口
  • URL.origin:返回协议、域名和端口
  • URL.pathname:返回路径,以斜杠/开头
  • URL.search:返回查询字符串,以问号?开头
  • URL.searchParams:返回一个URLSearchParams实例,该属性是Location对象没有的
  • URL.hash:返回片段识别符,以井号#开头
  • URL.password:返回域名前面的密码
  • URL.username:返回域名前面的用户名

这些属性里面,只有origin属性是只读的,其他属性都可写。

searchParams

URLSearchParams对象是浏览器的原生对象,用来构造、解析和处理 URL 的查询字符串(即 URL 问号后面的部分)。

它本身也是一个构造函数,可以生成实例。参数可以为查询字符串,起首的问号?有没有都行,也可以是对应查询字符串的数组或对象。

  1. // 方法一:传入字符串
  2. var params = new URLSearchParams('?foo=1&bar=2');
  3. // 等同于
  4. var params = new URLSearchParams(document.location.search);
  5. // 方法二:传入数组
  6. var params = new URLSearchParams([['foo', 1], ['bar', 2]]);
  7. // 方法三:传入对象
  8. var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});

静态方法

URL.createObjectURL()

**URL.createObjectURL()** 静态方法会创建一个 [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString),其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 [document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document) 绑定。这个新的URL 对象表示指定的 [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象或 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象。

URL.createObjectURL()方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL。通常将url用于a、img等元素中,常用于下载或展示文件

实例:预览上传的图片

  1. <input type="file" accept="image/*" />
  2. <img src="" alt="" />
  3. <script>
  4. const inp = document.querySelector('input')
  5. const img = document.querySelector('img')
  6. inp.onchange = function () {
  7. const blob = URL.createObjectURL(inp.files[0])
  8. img.setAttribute('src', blob)
  9. }
  10. </script>

实例:从服务器请求得到excel的二进制数据,然后通过创建url下载文件。

  1. import XLSX from "xlsx";
  2. /**
  3. * @description 将一个sheet转成最终的excel文件的blob对象
  4. * @param {XLSX.utils.json_to_sheet} sheet
  5. * @returns {String} sheetName
  6. */
  7. export function sheetToBlob(sheet, sheetName) {
  8. sheetName = sheetName || "sheet1";
  9. var workbook = {
  10. SheetNames: [sheetName],
  11. Sheets: {},
  12. };
  13. workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
  14. var wopts = {
  15. bookType: "xlsx", // 要生成的文件类型
  16. bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
  17. type: "binary",
  18. };
  19. var wbout = XLSX.write(workbook, wopts);
  20. var blob = new Blob([s2ab(wbout)], {
  21. type: "application/octet-stream",
  22. }); // 字符串转ArrayBuffer
  23. function s2ab(s) {
  24. var buf = new ArrayBuffer(s.length);
  25. var view = new Uint8Array(buf);
  26. for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  27. return buf;
  28. }
  29. return blob;
  30. }
  31. /**
  32. * @description 将sheetToBlob转化的blob对象利用URL.createObjectURL下载为excel文件
  33. * @param {ArrayBuffer} blob
  34. * @returns {String} saveName
  35. */
  36. export function downloadExcel(blob, saveName) {
  37. if (typeof blob == "object" && blob instanceof Blob) {
  38. var url = URL.createObjectURL(blob); // 创建blob地址
  39. }
  40. var aLink = document.createElement("a");
  41. aLink.href = url;
  42. aLink.style.display = "none";
  43. aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
  44. document.body.appendChild(aLink);
  45. aLink.click();
  46. document.body.removeChild(aLink); //下载完成移除元素
  47. window.URL.revokeObjectURL(url); //释放掉blob对象
  48. }

URL.revokeObjectURL()

URL.revokeObjectURL()方法用来释放URL.createObjectURL()方法生成的 URL 实例。它的参数就是URL.createObjectURL()方法返回的 URL 字符串。

参考

MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL
https://wangdoc.com/javascript/bom/location.html

常用操作

键值对拼接成URL参数

  1. const params2Url = (uri, params) => {
  2. const paramsArray = [];
  3. Object.keys(params).forEach(
  4. (key) => params[key] && paramsArray.push(`${key}=${params[key]}`)
  5. );
  6. if (uri.search(/\?/) === -1) {
  7. uri += `?${paramsArray.join("&")}`;
  8. } else {
  9. uri += `&${paramsArray.join("&")}`;
  10. }
  11. return uri;
  12. };
  13. let params = {
  14. keyword: "t",
  15. page: 1,
  16. size: 2,
  17. };
  18. params2Url('/datasource/check/p', params)

image.png