Skip to content
Related Articles

Related Articles

Optimum way to compare strings in JavaScript

Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 12 Dec, 2021

In this article, we will know the optimal way to compare the strings using build-in Javascript methods & will see their implementation through the examples. The question is to compare 2 JavaScript strings optimally. To do so, here are a few of the most used techniques discussed. The method discussed below is used in the following 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 that tells whether the string comes before, after, or is equal to the compareString in sort order.

Syntax:

string.localeCompare(String_2);

Parameters:

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

Please refer to the JavaScript Operators Complete Reference article for further details of operators.

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

HTML




<!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:

localeCompare() Method

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.

HTML




<!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: 

string comparison

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

HTML




<!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:

localeCompareMethod for string comparison


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!