DEV Community

P Mukila
P Mukila

Posted on

JavaScript String Methods

#lowercaseanduppercase #trimstart #padstartandpadend #concat

Javascript strings are primitive and immutable: All string methods produce a new string without altering the original string.

Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():

A string is converted to lower case with toLowerCase():

toUpperCase():

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

toLowerCase():

string to Lowercase
   <h1>String Lowercase</h1> 
   <p>Convert string to lower case:</p>
   <button onclick="myFunction()">Try it</button>
   <p id="demo">Hello World</p>
   <script>
   function myFunction(){
   let text = document.getElementById("demo").innerHTML;
   document.getElementById("demo").innerHTML =          text.toLowerCase();
     }
Enter fullscreen mode Exit fullscreen mode

JavaScript String concat():

concat() joins two or more strings

<h1>String concat</h1>
<p>concat() joins two or more strings:</p>
<p id="click"></p>
<script>
    let text1 = "Hello";
    let text2 = "World!";
    let text3 = text1.concat(" ",text2);
    document.getElementById("click").innerHTML = text3;


</script>
Enter fullscreen mode Exit fullscreen mode

JavaScript String trimStart():

The trimStart() method works like trim(), but removes whitespace only from the start of a string.

<h1>Trimstart javascript</h1>
<p>The trimStart() method works like trim(), but removes whitespace only from the start of a string.
</p>
<p id="change"></p>
<script>
    let text1 = "     Hello    World"
    let text2 = text1.trimStart();
    document.getElementById("change").innerText = 

    "Length.text1 = " + text1.length + "<br>Length.text2 = " + text2.length;

</script>
Enter fullscreen mode Exit fullscreen mode

JavaScript String trimEnd()

The trimEnd() method works like trim(), but removes whitespace only from the end of a string.

<h1> trimend javascript</h1>
<p>The trimEnd() method works like trim(), but removes whitespace only from the end of a string.</p>
<p id="change"></p>
<script>
    let text1 = "     Hello World             ";
    let text2 = text1.trimEnd();
    document.getElementById("change").innerHTML = 
    "Length.text1 = "+ text1.length + "<br>length.text2 = " + text2.length; 
 </script>
Enter fullscreen mode Exit fullscreen mode

JavaScript String padStart():

The padStart() method pads a string from the start.

It pads a string with another string (multiple times) until it reaches a given length.

<h1>string padstart</h1>
    <p>The padStart() method pads a string from the start.</p>
    <p id="change"></p>
<script>
    let element = "6";
    element = element.padStart(4,"0");
    document.getElementById("change").innerHTML =  element;

</script>
Enter fullscreen mode Exit fullscreen mode

JavaScript String padEnd():

The padEnd() method pads a string from the end.

It pads a string with another string (multiple times) until it reaches a given length.

<h1>String padend</h1>
<p>It pads a string with another string (multiple times) until it reaches a given length.</p>
<p id="click"></p>
<script>

    let text = "5";
    text = text.padEnd(4,"0");
    document.getElementById("click").innerHTML = text;
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)