Optimum way to compare strings in JavaScript

Last Updated : 20 May, 2019

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

Related Articles