How to Use URL API in Deno: Syntax and Examples

In Deno, you use the URL API to parse and manipulate URLs easily by creating a new URL object with a string URL. This object provides properties like hostname, pathname, and methods to modify or read parts of the URL.

Syntax

The URL API in Deno works by creating a new URL object with a URL string. You can then access or change parts of the URL using its properties.

• new URL(input, base?): Creates a URL object. input is the URL string. base is optional and used if input is relative.
• Properties: href (full URL), protocol, hostname, pathname, searchParams (query parameters), etc.

typescript

const url = new URL('https://example.com/path?name=deno');
console.log(url.hostname); // example.com
console.log(url.pathname); // /path
console.log(url.searchParams.get('name')); // deno

Output

example.com
/path
deno

Example

This example shows how to create a URL object, read its parts, add a query parameter, and print the updated URL.

typescript

const url = new URL('https://deno.land/manual?version=1');

// Read parts
console.log('Protocol:', url.protocol); // https:
console.log('Host:', url.host); // deno.land
console.log('Pathname:', url.pathname); // /manual

// Add a query parameter
url.searchParams.append('lang', 'en');

// Print full updated URL
console.log('Updated URL:', url.href);

Output

Protocol: https:
Host: deno.land
Pathname: /manual
Updated URL: https://deno.land/manual?version=1&lang=en

Common Pitfalls

Common mistakes when using the URL API in Deno include:

• Passing a relative URL without a base, which throws an error.
• Modifying searchParams incorrectly by not using its methods like append or set.
• Confusing host and hostname: host includes port, hostname does not.

typescript

try {
  // This will throw because no base is provided for relative URL
  const badUrl = new URL('/relative/path');
} catch (e) {
  console.log('Error:', e.message);
}

// Correct way with base
const goodUrl = new URL('/relative/path', 'https://example.com');
console.log(goodUrl.href); // https://example.com/relative/path

Output

Error: Invalid URL
https://example.com/relative/path

Quick Reference

Property/Method	Description	Example
new URL(input, base?)	Creates a URL object from a string, with optional base for relative URLs	new URL('https://deno.land')
url.href	Full URL string	url.href // 'https://deno.land/manual'
url.protocol	URL protocol including colon	url.protocol // 'https:'
url.hostname	Domain name without port	url.hostname // 'deno.land'
url.host	Domain name with port if any	url.host // 'deno.land:8080'
url.pathname	Path after domain	url.pathname // '/manual'
url.searchParams	URL query parameters object	url.searchParams.get('q')
url.searchParams.append(name, value)	Add a query parameter	url.searchParams.append('lang', 'en')

Key Takeaways

Create a URL object with new URL(urlString, base?) to parse and manipulate URLs.

Use URL properties like hostname, pathname, and searchParams to read or change parts.

Always provide a base URL when parsing relative URLs to avoid errors.

Use searchParams methods to safely add or modify query parameters.

Remember host includes port, hostname does not.