How to break lines using template string (ES6)?

Question

I have a request for the back-end and your URL is very large.

this
  .$http
  .get(`backoffice/usuarios/${this.id}/grupo/${this.grupo}/filial/${this.filial}/multinivel/${this.multinivel}`)
  .then(({ data }) => {
    this.items = data
  })
})

Since I am using Template Strings ES6 Javascript, I would like to know how to perform a line break without it putting the spaces (%20) in the request.

I know I can break into several constants using const, but I wonder if there is a way to accomplish the line break easily with ES6.

I tried with '/n', enter normal, and it didn’t work.

The request is made in a Vuejs2 project.

Answer 1

If the idea is only to facilitate reading you can do:

const url = `
  backoffice/
  usuarios/
  ${this.id}/
  grupo/
  ${this.grupo}/
  filial/
  ${this.filial}/
  multinivel/
  ${this.multinivel}
`;

this
  .$http
  .get(url)
  .then(({ data }) => {
    this.items = data
  })
})

If the .get() do not clean the blanks and line breaks together .replace(/[\n\s]+/g, '').

const url = `
  backoffice/
  usuarios/
  ${this.id}/
  grupo/
  ${this.grupo}/
  filial/
  ${this.filial}/
  multinivel/
  ${this.multinivel}
`.replace(/[\n\s]+/g, '');

this
  .$http
  .get(url)
  .then(({ data }) => {
    this.items = data
  })
})

You could also do this with an array (it would be my choice in this case):

const url = [
  "backoffice",
  "usuarios",
  this.id,
  "grupo",
  this.grupo,
  "filial",
  this.filial,
  "multinivel",
  this.multinivel
].join('/');

this
  .$http
  .get(url)
  .then(({
    data
  }) => {
    this.items = data
  })
})