Javascript URL with Template String

Question

I would like to mount a URL string with Template String. I want to know if it is possible.

This is what I am doing:

let url = `http://example.com/
                              MY_SERVICE/
                              MY_CONTROLLER/
                              ${MY_FIRST_PARAM}/
                              ${MY_SECOND_PARAM}`;

This code will return a string with break lines.

My question is: Is this possible to to this without break lines? The purpose is to have a more readable code.

My real URL is a little bit bigger than this.

Answer 1

You can call replace on any white space character after the template string:

let MY_FIRST_PARAM = 'foo';
let MY_SECOND_PARAM = 'bar';

let url = `http://example.com/
  MY_SERVICE/
  MY_CONTROLLER/
  ${MY_FIRST_PARAM}/
  ${MY_SECOND_PARAM}`
  .replace(/\s/g, '');

console.log(url);

Answer 2

In case this becomes useful to somebody else. Here are notes from my own experience related to similar situation.

The question is originally about a long template string with new lines. But the example also shows up about a system where one could store URLs and plug in parameters dynamically.

This is for people from the future who happens to try doing the same, either in relation to URI Templates, and/or template literals, and/or stripping off white-space/new-lines. Like I did today.

The author most likely implemented like he asked the question.

The pattern of having URLs we can configure and insert variables has a specification and tools to help you not re-invent that wheel. :-)

Besides, if you concatenate many template literals you may get complaints from ESLint.

A better way of doing is to leverage JavaScript's URL object and RFC 6570 URI Template specification

It makes things much more manageable.

The implementation I used today was using bramstein/url-template. This library is awesome and it supports a lot of use-cases

Here is a full-circle example of a URI Template, and how to manipulate the URL without using RegExes.

// const urltemplate = require('url-template');
// Using example from question, slightly modified.
let url = `http://example.com/
                              MY_SERVICE/
                              MY_CONTROLLER
                              {/MY_FIRST_PARAM,MY_SECOND_PARAM}
                              `;
//                              (below) STRIP OFF new lines and spaces
//                               Credits to KevBot
const parsed = urltemplate.parse(url.replace(/[\s\n]/g,''));
const exampleFactory = a => new URL(parsed.expand(a))

// NOTICE we do not give any velue to MY_SECOND_PARAM
const firstExample = {
  MY_FIRST_PARAM: 'foo'
}
console.log((exampleFactory(firstExample)).pathname);
// > '/MY_SERVICE/MY_CONTROLLER/foo'

const secondExample = {
  MY_FIRST_PARAM: 'foo',
  MY_SECOND_PARAM: 'bar'
}
console.log((exampleFactory(secondExample)).pathname);
// > '/MY_SERVICE/MY_CONTROLLER/foo/bar'

<script src="https://cdn.rawgit.com/bramstein/url-template/c7119202/lib/url-template.js"></script>

_{NOTE Use of URI and URL is voluntarily mixed as we aren't talking about XML namespaces ("URI") that looks like a Web Address ("URL")}