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();

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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();

CodePudding user response：

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.

CodePudding user response：

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())

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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)

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.`;