Front-end должен знать и должен знать — черную технологию работы с URL

JavaScript

предисловие

Теперь есть такой URL: www.baidu.com/s?wd=Cai Xukun&skill=basketball&year=2019, как мне получить поля по запросу? В этот раз пригодятся регулярные выражения, и эффект будет следующим:

Убивать цыплят — хорошая идея.Сегодня мы изучим интерфейс, специально используемый для обработки URL-запроса: URLSearchParams.

Простой в использовании

Просто нужно создать новый экземпляр URLSearchParams, код:

let url = '?wd=蔡徐坤&skill=篮球&year=2019';
let searchParams = new URLSearchParams(url);

for (let p of searchParams) {
  console.log(p);
}
// ["wd", "蔡徐坤"]
// ["skill", "篮球"]
// ["year", "2019"]

получить одно поле

Что, если теперь я просто хочу получить значение одного поля? Просто вызовите метод get этого экземпляра, код:

searchParams.get('wd') // "蔡徐坤"
searchParams.get('skill') // "篮球"
searchParams.get('year') // "2019"

Иногда я не знаю, существует ли поле, поэтому я хочу проверить его заранее. Используйте метод экземпляра has для оценки кода:

searchParams.has('wd') // true
searchParams.has('age') // false

добавить поле

Экземпляр предоставляет метод append для добавления полей. Этот метод получает два параметра, первый из которых является ключом, а второй — значением. Код:

searchParams.append('age', 26);
searchParams.has('age'); // true
searchParams.get('age'); // 26

удалить поле

Теперь мне больше не нужно поле года, просто используйте удаление напрямую, код:

searchParams.delete('year');
searchParams.has('year'); // false

установить поле

Иногда мы хотим переписать поле вместо того, чтобы добавить поле. В это время нам нужно использовать метод набора. Например, мы думаем, что брат Кун может не только играть в баскетбол, но и петь, танцевать и читать рэп. Код:

searchParams.set('skill', '篮球 唱 跳 rap');

преобразовать в строку

После модификации экземпляра иногда необходимо преобразовать его в строку, выполнить роутинговые переходы и т.д., использовать метод toString

searchParams.toString(); // "wd=蔡徐坤&skill=篮球+唱+跳+rap&year=2019&age=26"

После волны операций

совместимость

Современные браузеры в основном хороши, но поддержка IE не идеальна.

Внешняя ссылка

Категории