1.基础模块/6、url - URL

url - URL

url 模块用于处理与解析 URL。 使用方法如下:

const url = require('url');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWgQakys-1612076986441)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20210130150412246.png)]

属性

1.url.href

获取及设置序列化的 URL。

const myURL = new URL('https://example.org/foo');
console.log(myURL.href);
  // (获取)       打印 https://example.org/foo

myURL.href = 'https://example.com/bar';
console.log(myURL.href);
//(修改) 打印 https://example.com/bar

获取 href 属性的值等同于调用 url.toString()

2.url.host

获取及设置 URL 的主机部分。

3.url.hostname

获取及设置 URL 的主机名部分。

url.hosturl.hostname 之间的区别是 url.hostname 不包含端口。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');


console.log(myUrl.host);      // 打印 mywebsite.com:8000
console.log(myUrl.hostname);  // 打印 mywebsite.com
4.url.pathname

获取及设置 URL 的路径部分。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');

console.log(myUrl.pathname);  // 打印 /hello.html
5.url.search

获取及设置 URL 的序列化查询部分。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');

console.log(myUrl.search);  // 打印 ?id=100&status=active
6.url.searchParams

获取表示 URL 查询参数的对象。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');

console.log(myUrl.searchParams);  
// 打印 URLSearchParams { 'id' => '100', 'status' => 'active' }

方法

1.urlSearchParams.append(name, value)

在这里插入图片描述

在查询字符串中附加一个新的键值对。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');

myUrl.searchParams.append('abc', '123');
console.log(myUrl.searchParams);
// 打印 URLSearchParams { 'id' => '100', 'status' => 'active', 'abc' => '123' }
2.urlSearchParams.forEach(fn[, thisArg])

在这里插入图片描述

在查询字符串中迭代每个键值对,并调用给定的函数。

const url = require('url');

const myUrl = new URL('http://mywebsite.com:8000/hello.html?id=100&status=active');

myUrl.searchParams.forEach((value, key) => {
    console.log(`${key}:${value}`);
})
//id:100
//status:active
);

myUrl.searchParams.forEach((value, key) => {
    console.log(`${key}:${value}`);
})
//id:100
//status:active
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ERROR Failed to compile with 48 errors 上午10:53:54 These dependencies were not found: * core-js/modules/es.array.push.js in ./node_modules/.store/@[email protected]/node_modules/@babel/runtime/helpers/esm/objectSpread2.js, ./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/.store/[email protected]/node_modules/babel-loader/lib!./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/.store/[email protected]/node_modules/vue-loader/lib??vue-loader-options!./src/components/HeaderSearch/index.vue?vue&type=script&lang=js& and 29 others * core-js/modules/es.error.cause.js in ./node_modules/.store/@[email protected]/node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js, ./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/.store/[email protected]/node_modules/babel-loader/lib!./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/.store/[email protected]/node_modules/vue-loader/lib??vue-loader-options!./src/layout/components/Navbar.vue?vue&type=script&lang=js& and 5 others * core-js/modules/es.object.proto.js in ./node_modules/.store/@[email protected]/node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js * core-js/modules/es.regexp.dot-all.js in ./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/.store/[email protected]/node_modules/babel-loader/lib!./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/.store/[email protected]/node_modules/vue-loader/lib??vue-loader-options!./src/components/ThemePicker/index.vue?vue&type=script&lang=js&, ./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/.store/[email protected]/node_modules/babel-loader/lib!./node_modules/.store/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/.store/[email protected]/node_modules/vue-loader/lib??vue-loader-options!./src/layout/components/Navbar.vue?vue&type=script&lang=js& and 2 others * core-js/modules/web.url-search-params.delete.js in ./src/utils/request.js * core-js/modules/web.url-search-params.has.js in ./src/utils/request.js * core-js/modules/web.url-search-params.size.js in ./src/utils/request.js * qs in ./src/utils/request.js * svg-baker-runtime/browser-symbol in ./src/icons/svg/user.svg To install them, you can run: npm install --save core-js/modules/es.array.push.js core-js/modules/es.error.cause.js core-js/modules/es.object.proto.js core-js/modules/es.regexp.dot-all.js core-js/modules/web.url-search-params.delete.js core-js/modules/web.url-search-params.has.js core-js/modules/web.url-search-params.size.js qs svg-baker-runtime/browser-symbol怎么解决如何安装
07-21

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值