You might have a base URL from configuration, that you then concatenate with paths to produce a full URL. Say an API URL you fetch from.
But should you provide the base URL with or without a trailing slash? e.g. Should you have
If you simply combine the strings together, you can end up with double slashes:
const baseURL = 'https://api.example.org/'; const productsURL = baseURL + '/products'; // 'https://api.example.org//products'
We could try and check for the double slash, but that’s a pain:
const productsURL = baseURL + (baseURL.endsWith('/') ? 'products' : '/products');
Wouldn’t you just rather not worry about this? Turns out we can with the built-in
URL class. It’s supported in all modern browsers (not IE).
const baseURL = 'https://api.example.org/'; const productsURL = new URL('/products', baseURL).toString(); // 'https://api.example.org/products'
Isn’t that better? It’s also available in Node.js and Deno, so we can use the same technique everywhere.