Optimum way to compare strings in JavaScript

The question is to compare 2 JavaScript strings optimally. To do so, Here are a few of the most used techniques discussed. This method discussed below is used in one of the examples.

String localeCompare() method: This method compares two strings in the current locale. The current locale is based on the language settings of the browser.
This method returns a number tells whether the string comes before, after or is equal as the compareString in sort order.

Syntax:

string.localeCompare(String_2)

Parameters:

String_2: This parameter is required. It specifies the string to be compared with.

Example-1: This example compares the 2 string using localeCompare() method and returns 0, -1 or 1. This method does case-sensitive comparing.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Optimum way to compare strings 
    </title> 
</head> 
  
<body style="text-align:center;"
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> String_1: 
    <input type="text" 
           id="text1"
           name="tname1"> 
    <br> 
    <br> String_2: 
    <input type="text" 
           id="text2"
           name="tname2"> 
    <br> 
    <br> 
    <button onclick="gfg_Run()"> 
        Compare 
    </button> 
    <p id="GFG_DOWN" 
       style="color:green;  
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var str1 = document.getElementById("text1"); 
        var str2 = document.getElementById("text2"); 
  
        var el_down = document.getElementById("GFG_DOWN"); 
  
        function gfg_Run() { 
            var a = str1.value; 
            var b = str2.value; 
            var ans = a.localeCompare(b); 
            var res = ""; 
            if (ans == -1) { 
                res = '"' + a + '" comes before "' + b + '"'; 
            } else if (ans == 0) { 
                res = 'Both string are same'; 
            } else { 
                res = '"' + a + '" comes after "' + b + '"'; 
            } 
            el_down.innerHTML = res; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-2: This example compares the 2 string by writing a condition which returns 0, -1 or 1 depending on the comparison. This method also does case-sensitive comparing.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Optimum way to compare strings 
    </title> 
</head> 
  
<body style="text-align:center;"
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> String_1: 
    <input type="text"
           id="text1" 
           name="tname1"> 
    <br> 
    <br> String_2: 
    <input type="text" 
           id="text2"
           name="tname2"> 
    <br> 
    <br> 
    <button onclick="gfg_Run()"> 
        Compare 
    </button> 
    <p id="GFG_DOWN"
       style="color:green;  
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var str1 = document.getElementById("text1"); 
        var str2 = document.getElementById("text2"); 
  
        var el_down = document.getElementById("GFG_DOWN"); 
  
        function gfg_Run() { 
            var a = str1.value; 
            var b = str2.value; 
            var ans = a < b ? -1 : (a > b ? 1 : 0); 
            var res = ""; 
            if (ans == -1) { 
                res = '"' + a + '" comes before "' + b + '"'; 
            } else if (ans == 0) { 
                res = 'Both string are same'; 
            } else { 
                res = '"' + a + '" comes after "' + b + '"'; 
            } 
            el_down.innerHTML = res; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-3: This example compares the 2 same string(case-sensitive also) by using localeCompare() method .

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Optimum way to compare strings 
    </title> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> String_1: 
    <input type="text"
           id="text1"
           name="tname1"> 
    <br> 
    <br> String_2: 
    <input type="text"
           id="text2" 
           name="tname2"> 
    <br> 
    <br> 
    <button onclick="gfg_Run()"> 
        Compare 
    </button> 
    <p id="GFG_DOWN"
       style="color:green;  
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var str1 = document.getElementById("text1"); 
        var str2 = document.getElementById("text2"); 
  
        var el_down = document.getElementById("GFG_DOWN"); 
  
        function gfg_Run() { 
            var a = str1.value; 
            var b = str2.value; 
            var ans = a.localeCompare(b); 
            var res = ""; 
            if (ans == -1) { 
                res = '"' + a + '" comes before "' + b + '"'; 
            } else if (ans == 0) { 
                res = 'Both string are same'; 
            } else { 
                res = '"' + a + '" comes after "' + b + '"'; 
            } 
            el_down.innerHTML = res; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: