Las URL (Uniform Resource Locators) son la columna vertebral del Internet. Ellas nos conducen a sitios web y a otros recursos que existen en el Internet. Una URL se compone de diferentes segmentos que en un uso tipico se nos pasan por encima de la cabeza. Pero a veces es necesario entenderlo a la hora de desarrollar una aplicación.

La URL

Para una vista simplista, la URL se compone de 5 partes:

• El protocolo: 'https:', 'wss:', 'http:', etc
• El subdominio: 'www', 'blog', 'admin',etc
• El subdominio de segundo nivel (SLD): 'google', 'npdt', 'youtube', etc
• El dominio del nivel superior (TLD): '.com', '.eu', '.dev', etc
• La ruta: '/resource/1', '/about', '/hello/world'

Estos elementos pueden cubren por la mayoría toda la navegación. El protocolo le dice al navegador u otro cliente cómo conectarse al sitio web. El subdominio es un segmento que subdivide el dominio y que puede ser opcional o prácticamente cualquier texto que desees (el más común es www). El subdominio de segundo nivel es el nombre del sitio web. El dominio de nivel superior o extensión de dominio se utiliza para identificar entre lost dominios en el nivel superior del Sistema de Nombres de Dominio (DNS) jerárquico de Internet. Y, por último, la ruta se utiliza para buscar recursos dentro del sitio, de una forma similar a un explorador de archivos.

El URL en Javascript

Parte de las API WEB incluyen el objeto URL. Para crear uno usamos su constructor con la URL como 'string' o alternativamente podemos usar otra variación de su constructor que toma la URL relativa y la base. Si la URL es incorrecta en el contexto del formato, generará un TypeError.

const url = new URL("https://google.com");
const otherUrl = new URL("/en/blog","https://npdt.dev");

El objeto URL tiene varias propiedades que nosotros, como developers, podemos utilizar en nuestras aplicaciones. Los que consideré más importantes dentro de una aplicación son los siguientes:

• hostname: el dominio de la URL.
• host: el 'hostname', y el puerto si no fue vacio.
• href: el URL completo.
• pathname: la ubicación relative del recurso.
• searchParams: los parametros de búsqueda.

El siguiente gráfico muestra el resultado de las varias propiedades de la URL en un ejemplo más complejo.

Conclusión

Como developer, es importante comprender los componentes básicos de la web, en este post fue la URL. Personalmente, olvido las partes del objeto URL en JavaScript, pero con este acordión puedo buscar rápidamente la parte de la URL que necesitó usar dentro de en una aplicación.