whatwg-url vs url-parse vs url vs query-string vs url-search-params | Comparação de pacotes npm de "Manipulação de URLs em JavaScript"

Pacote	Downloads	Stars	Tamanho	Issues	Publicado em	Licença

whatwg-url	89,072,903	403	98.6 kB	5	il y a 5 mois	MIT
url-parse	24,534,000	1,035	63 kB	13	-	MIT
url	18,668,732	381	78.3 kB	17	il y a un an	MIT
query-string	12,542,627	6,876	53 kB	29	il y a 2 mois	MIT
url-search-params	62,734	761	-	0	il y a 7 ans	MIT

Pacote

Downloads

Stars

Tamanho

Issues

Publicado em

Licença

whatwg-url

89,072,903

403

98.6 kB

il y a 5 mois

MIT

url-parse

24,534,000

1,035

63 kB

MIT

url

18,668,732

381

78.3 kB

il y a un an

MIT

query-string

12,542,627

6,876

53 kB

il y a 2 mois

MIT

url-search-params

62,734

761

il y a 7 ans

MIT

Análise de URLs

whatwg-url:
whatwg-url fornece uma API para análise de URLs que segue rigorosamente a especificação WHATWG. Ele inclui a classe URL, que analisa URLs e fornece acesso a suas partes, e a classe URLSearchParams, que lida com a parte de consulta.
url-parse:
url-parse é uma biblioteca leve que analisa URLs e os divide em partes. Ela fornece um construtor que aceita uma string de URL e a analisa em componentes como protocolo, hostname, caminho, consulta e hash.
url:
A biblioteca url do Node.js fornece uma função url.parse que analisa URLs completos e os divide em suas partes componentes, como protocolo, hostname, caminho, consulta e hash.
query-string:
query-string não analisa URLs inteiros, mas se concentra na análise de strings de consulta. Ele fornece uma função parse que converte uma string de consulta em um objeto, lidando com parâmetros aninhados e arrays de forma eficiente.
url-search-params:
url-search-params não analisa URLs, mas fornece uma interface para trabalhar com a parte de consulta de um URL. Você pode criar um objeto URLSearchParams a partir de uma string de consulta ou de um objeto, permitindo fácil acesso e manipulação dos parâmetros de consulta.

Manipulação de Parâmetros de Consulta

whatwg-url:
whatwg-url fornece uma API completa para manipulação de parâmetros de consulta por meio da classe URLSearchParams, que permite adicionar, remover e modificar parâmetros de consulta de maneira eficiente e conforme os padrões.
url-parse:
url-parse permite a manipulação básica de parâmetros de consulta, mas não fornece recursos avançados. Você pode acessar e modificar a string de consulta diretamente, mas terá que lidar com a codificação e decodificação manualmente.
url:
A biblioteca url do Node.js permite a manipulação de parâmetros de consulta, mas não fornece uma API dedicada para isso. Você precisará manipular a string de consulta manualmente após analisá-la.
query-string:
query-string permite a manipulação de parâmetros de consulta, incluindo a adição, remoção e modificação de parâmetros. Ele suporta parâmetros aninhados e arrays, tornando-o fácil de usar para cenários complexos.
url-search-params:
url-search-params fornece uma API rica para manipulação de parâmetros de consulta. Você pode adicionar, remover e modificar parâmetros facilmente, e a API cuida da codificação e decodificação para você.

Conformidade com Padrões

whatwg-url:
whatwg-url é uma implementação completa e padrão da especificação WHATWG para manipulação de URLs, garantindo conformidade rigorosa com os padrões da web.
url-parse:
url-parse é uma implementação leve que segue os padrões da web para análise de URLs, mas pode não ser tão completa quanto outras soluções em termos de conformidade com a especificação.
url:
A biblioteca url do Node.js é uma implementação padrão para manipulação de URLs em ambientes Node.js, mas pode não seguir todos os aspectos da especificação WHATWG.
query-string:
query-string é uma biblioteca leve que segue os padrões da web, mas não é uma implementação oficial. Ela é projetada para ser simples e eficaz, com foco na manipulação de strings de consulta.
url-search-params:
url-search-params é uma API nativa do navegador que segue a especificação WHATWG para manipulação de parâmetros de consulta, garantindo conformidade com os padrões da web.

Exemplo de Código

whatwg-url:

Exemplo de Análise de URL com whatwg-url

import { URL } from 'whatwg-url';

// Analisando um URL
const myUrl = new URL('https://www.example.com/path?name=John&age=30#about');

// Acessando Partes do URL
console.log(myUrl.protocol); // 'https:'
console.log(myUrl.hostname); // 'www.example.com'
console.log(myUrl.search); // '?name=John&age=30'
console.log(myUrl.hash); // '#about'

url-parse:

Exemplo de Análise de URL com url-parse

import Url from 'url-parse';

// Analisando um URL
const myUrl = new Url('https://www.example.com/path?name=John&age=30#about');

console.log(myUrl);
// Acesse partes do URL
console.log(myUrl.protocol); // 'https:'
console.log(myUrl.hostname); // 'www.example.com'
console.log(myUrl.query); // 'name=John&age=30'
console.log(myUrl.hash); // '#about'

url:

Exemplo de Análise de URL com a Biblioteca url

const url = require('url');

// Analisando um URL
const myUrl = url.parse('https://www.example.com/path?name=John&age=30#about');

console.log(myUrl);
/* Saída:
{
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.example.com',
  port: null,
  hostname: 'www.example.com',
  hash: '#about',
  search: '?name=John&age=30',
  query: 'name=John&age=30',
  pathname: '/path',
  path: '/path?name=John&age=30',
  href: 'https://www.example.com/path?name=John&age=30#about'
}
*/

query-string:

Exemplo de Análise e Serialização com query-string

import { parse, stringify } from 'query-string';

// Analisando uma string de consulta
const parsed = parse('?name=John&age=30&hobbies[]=reading&hobbies[]=traveling');
console.log(parsed);
// Saída: { name: 'John', age: '30', hobbies: ['reading', 'traveling'] }

// Serializando um objeto em uma string de consulta
const stringified = stringify(parsed);
console.log(stringified);
// Saída: 'name=John&age=30&hobbies%5B0%5D=reading&hobbies%5B1%5D=traveling'

url-search-params:

Exemplo de Manipulação de Parâmetros de Consulta com url-search-params

// Criando um objeto URLSearchParams
const params = new URLSearchParams('?name=John&age=30&hobby=reading');

// Acessando Parâmetros
console.log(params.get('name')); // 'John'
console.log(params.get('age')); // '30'

// Adicionando um Novo Parâmetro
params.append('hobby', 'traveling');

// Removendo um Parâmetro
params.delete('age');

// Iterando sobre os Parâmetros
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}
// Saída:
// name: John
// hobby: reading
// hobby: traveling