How to remove extra space in template literals?

Question

When I create template literals, I would use the trim() to remove extra space. But I noticed when I do this inside a JS function, it still creates extra tabs or white space.

  function BottlesOfBeer()  {
    
        for (i = 99; i>=1; i--) {
    
            if (i === 1) {        
                var oneBottle = "1 bottle of beer on the wall, 1 bottle of beer.\n" +
                                "Take one down and pass it around, no more bottles of beer on the wall.\n" +
                                "No more bottles of beer on the wall, no more bottles of beer.\n" +
                                "Go to the store and buy some more, 99 bottles of beer on the wall.";        
                
                console.log(oneBottle);
            } else {
                            
                var lineOne = `
                ${i} bottles of beer on the wall, ${i} bottles of beer.
                Take one down pass it around, ${i - 1} bottles of beer on the wall.
                `.trim();
    
                console.log(lineOne);        
            }
        }
    }
    
    BottlesOfBeer();

99 bottles of beer on the wall, 99 bottles of beer.
            Take one down pass it around, 98 bottles of beer on the wall.
98 bottles of beer on the wall, 98 bottles of beer.

You can see how the first line appears normally, but the second one has all the necessary tabs.

well in reality they should start at the first and not be indented. Only way around it would to to replace all the tabs when you output it. `.replace(/\t/g, '');` — epascarello, Dec 06 '21 at 23:52
Undo all of the indentation before the word `Take` and the rest. You've created a multi-line string with lots of whitespace in the middle of it, and `trim()` only works on leading and trailing whitespace of a string — Andy Ray, Dec 06 '21 at 23:53
https://stackoverflow.com/questions/37321047/wrap-long-template-literal-line-to-multiline-without-creating-a-new-line-in-the — epascarello, Dec 06 '21 at 23:54

Ruan Mendes · Accepted Answer · 2021-12-07T00:13:47.963

One solution is to break up the string into lines, and trim each of them.

const i = 1;

const lineOne = `
                ${i} bottles of beer on the wall, ${i} bottles of beer.
                Take one down pass it around, ${i - 1} bottles of beer on the wall.
                `.split("\n")
                 .map(s => s.trim())
                 // If you want to remove empty lines.
                 .filter(Boolean)
                 .join("\n");

console.log(lineOne)

If it were me, in this case, I would just jam the text against the left, it still seems readable enough.

          const lineOne = `${i} bottles of beer on the wall, ${i} bottles of beer.
Take one down pass it around, ${i - 1} bottles of beer on the wall.`;

score 2 · Answer 2 · answered Dec 07 '21 at 00:01

replace any space sequence with minimal length 2, or \t or \n signs and replace by ' ', or ''. what you need.

const lineOne = `
                    ${1} bottles of beer on the wall, ${2} bottles of beer.
                    Take one down pass it around, ${1} bottles of beer on the wall.
                    `
    
  console.log(lineOne.replace(/(\s\s+|[\t\n])/g, ' ').trim())

score 1 · Answer 3 · answered Dec 06 '21 at 23:52

1

You can use a global replace to remove double spaces and tabs and change it into single spaces, something really simple like:

let result = myStrToReplace.replaceAll("\t", "").replaceAll("  ", " ").trim();

answered Dec 06 '21 at 23:52

code

5,690
4
17
39

score 1 · Answer 4 · answered Dec 06 '21 at 23:58

This happens because the line indentation is inside the template literal tick marks. To avoid this break the statement into multiple template literals and concat them together the same way you did in the first text block, using the \n character to signify a new line. For instance:

var lineOne = `My first line.\n`
+ `My second line.`.trim();
console.log(lineOne);

Prints:

My first line.
My second line.

score 1 · Answer 5 · answered Apr 23 '22 at 03:13

1

break the statement into multiple template literals and connect them together the same way you did in the first text block, using the \n character to signify a new line

answered Apr 23 '22 at 03:13

Mahshad

89
3

How to remove extra space in template literals?

5 Answers5