Разрешите URLSearchParams генерировать и анализировать строки параметров для вас

Node.js внешний интерфейс Firefox React.js

Будь то в программах Node.js или интерфейсных программах HTML, мы не можем удержаться от написания строк поиска URL вручную, как показано ниже (URL Search StringакаQuery String):

// 备注：习惯上我们用 k 和 p 分别代表 keywords 和 pageIndex 的缩写:
function getQueryString(params) {
   if (params) {
     const {
       keywords,
       pageIndex = 1
     } = params;
     return `?k=${encodeURIComponent(keywords || '')}&p=${pageIndex}`;
   }
   throw new Error('"params" 参数不能为空。');
}

// 返回“?k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1”
console.log(getQueryString({ keywords: '关键字', pageIndex: 1 }));

Если вы прочитаете приведенный выше код построчно, то нетрудно обнаружить, что эта программа нене очень строго, и хотя параметров всего два, вам нужно считать параметры нулевыми или неопределенными, и вам нужно передатьencodeURIComponent()функция для решения проблем с кодировкой UTF-8.

И преобразование объектов JSON в строки URL — не самая большая проблема, как преобразовать изlocation.searchРазбор параметров - большая проблема. Например, начиная с react-router v4,Параметры URL больше не поддерживаются, вам нужно написать свой собственный код из Нужные вам параметры берутся из location.search.

URLSearchParams

Итак, вам может быть интересно, есть ли готовые решения или проекты с открытым исходным кодом для разных браузеров и Node.js? Ответ должен быть «да», и это по-прежнему стандарт.Параметры поиска URL(Документация на стороне браузера | Документация Node.js).

Список поддерживаемых браузеров

Цитировать

код браузера

// 如果需要支持较低版本的 PC 浏览器，需要额外安装和引用 polyfill：
// $ npm install --save url-search-params
// import URLSearchParams from 'url-search-params';

const urlSearchParams = new URLSearchParams();

Код Node.js

const { URLSearchParams } = require('url');

const urlSearchParams = new URLSearchParams();

Создать строку поиска

const params = new URLSearchParams();
params.set('k', '关键字');       // 设置参数
params.set('p', 1);             // 支持 Boolean、Number 等丰富类型
console.log(params.toString()); // k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1

Разбирать строку поиска

const params = new URLSearchParams('k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1');
console.log(params.get('k'));   // 返回字符串“关键字”，支持自动 UTF-8 解码
console.log(params.get('p'));   // 返回字符串“1”
console.log(params.get('xxx')); // 如果没有 xxx 这个键，则返回 null
console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键
console.log(params.keys());     // 返回一个 ES6 Iterator，内含 ['k', 'p']
console.log(params.values());   // 返一个 ES6 Iterator，内含 ['关键字', '1']
console.log(params.entries());  // 与 Map.prototype.entries() 类似

Как бы вид не генерировался или разбирался очень просто? И, что еще лучше, идеальная поддержка списка параметров поиска по URL!

Список параметров поиска URL

Я считаю, что многие студенты не знали, как передавать массивы в параметрах HTTP GET, Я видел, как многие люди используют этот метод:

http://example.com/search?brands=bmw,audi,mercedes

На самом деле вышеописанный метод недостаточно стандартный, и он должен иметь дело с ситуацией, когда исходная строка содержит «,», что широко используется в отрасли.Рекомендуемая парадигмаТакова, что:

http://example.com/search?brands=bmw&brands=audi&brands=mercedes

В Node.js, взяв в качестве примера экспресс, значение вышеуказанного параметра brands можно получить следующим методом:

app.get('/search', (req, res) => {
  console.log(req.query.brands); // 直接返回一个数组 ['bmw', 'audi', 'mercedes']
  ...
});

Итак, как мы должны генерировать и анализировать эту стандартную форму параметров через URLSearchParams? Просто используйте методы append() и getAll():

let params = new URLSearchParams();
// 通过 append() 方法添加所有的选项值
params.append('brands', 'bmw');
params.append('brands', 'audi');
params.append('brands', 'mercedes');
const searchString = params.toString();

// 解析也同样简单
params = new URLSearchParams(searchString);
console.log(params.getAll('brands')); // 返回一个数组 ['bmw', 'audi', 'mercedes']

напиши в конце

URLSearchParams, несомненно, является хорошим помощником для внешнего интерфейса для объединения строк запроса, особенно для реализации внешнего интерфейса. Вот предостережение, потому что это все еще экспериментально, Node.js, Chrome, Firefox и различные библиотеки Polyfill имеют несколько разные реализации, например:

const params = new URLSearchParams({
  k: '关键字',
  p: 1
});
console.log(params.toString());

В Chrome и Node.js мы можем получить ожидаемые результаты, но библиотеки классов FireFox и Polyfill не поддерживают конструкторы JSON, что поначалу чуть не привело меня к производственной аварии, да и реализация браузеров UC тоже отличается ( Строки, начинающиеся с "?" не поддерживаются в качестве параметров построения), поэтому вам следует быть особенно осторожным, когда вы используете его на начальном этапе. Нечего много говорить, просто дайте адрес документа API URLSearchParams:

О колонке

Если вам понравилась эта статья, пожалуйста, подпишитесь на мою колонку«Внешний нулевой стек», давайте вместе поговорим о фронтенд-технологиях и фронтенд-инжиниринге.

«Внешний нулевой стек»После открытия рубрики каждая статья была перепечатана друзьями или рекомендована еженедельниками. Добро пожаловать, чтобы продолжать уделять внимание.Нулевой стек моего внешнего интерфейса столбца - знай столбец.

Об авторе

Henry, работал в научно-исследовательском центре Alibaba в Нанкине, начал изучать компьютерное программирование в возрасте 10 лет и выиграл первый приз Молодежных информационных олимпиад в Цзянсу летом в старшей школе. В 2000 году начал самостоятельно изучать JavaScript и создание веб-страниц, а с 2006 года официально начал заниматься фронтенд-разработкой, занимается этим уже более 10 лет. До прихода в Alibaba он был менеджером по продуктам интеллектуальных транспортных больших данных в научно-исследовательском институте SAP China.

Гитхаб:MagicCube (Henry Li)

Категории