0Pricing
TypeScript Academy · Lección

Trabajo con FormData, URL y URLSearchParams

Recopile entradas de formularios con FormData, analice y cree URL de forma segura y manipule parámetros de consulta con URLSearchParams.

Trabajo con FormData, URL y URLSearchParams es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.

Introducción

Objetivo: trabajar con las API de datos del navegador: FormData, URL y URLSearchParams.

  • Recopilar valores de formularios
  • Crear y analizar URL
  • Gestionar parámetros de consulta

Conceptos básicos de FormData

FormData recopila las entradas por nombre. Iterar sobre entries() proporciona pares [name, value] como cadenas o objetos File.

const form = document.querySelector("form#login");
if (form) {
  const fd = new FormData(form);
  for (const [key, val] of fd.entries()) {
    console.log(key, val);
  }
}

Añadir elementos a FormData

Puede crear FormData manualmente con append, incluidos objetos Blob/File para las cargas.

const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");

for (const [k,v] of fd.entries()) {
  console.log(k, v);
}

Partes de una URL

URL analiza una cadena y la divide en partes (hostname, pathname, search, hash). Es más seguro que dividir cadenas manualmente.

const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /page

Obtener valores con URLSearchParams

URLSearchParams permite leer y escribir parámetros de consulta fácilmente. get() devuelve string | null.

const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // null

Actualización de parámetros

Actualice los parámetros con set, añada parámetros con append y elimínelos con delete. Use toString() para serializarlos.

const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescript

Comprobación de get de parámetros

Comprobación rápida: ¿Qué devuelve URLSearchParams.get("key") cuando no encuentra la clave?

Resumen

Resumen: FormData recopila los nombres y valores de entrada. URL analiza las URL de forma segura. URLSearchParams administra los parámetros de consulta.

Preguntas frecuentes

¿La lección «Trabajo con FormData, URL y URLSearchParams» es gratis?

Sí — el texto completo de «Trabajo con FormData, URL y URLSearchParams» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Trabajo con FormData, URL y URLSearchParams»?

Recopile entradas de formularios con FormData, analice y cree URL de forma segura y manipule parámetros de consulta con URLSearchParams. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.

¿Cuánto tiempo toma la lección «Trabajo con FormData, URL y URLSearchParams»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipos lib DOM y querySelector (comprobaciones estrictas de null)
  2. Tipos de eventos, eventos personalizados y reducción de subtipos de HTMLElement
  3. Trabajo con FormData, URL y URLSearchParams
← Volver a TypeScript Academy