Skip to content
Related Articles

Related Articles

Table of Contents

Improve Article
Save Article
Like Article

Optimum way to compare strings in JavaScript

  • 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
Previous
How to create multi-line strings in JavaScript?
Next

How to sort strings in JavaScript?
Recommended Articles
Page :
Difference between One-way Binding and Two-way Binding
21, Jul 21
HTML | optimum Attribute
02, Jan 19
HTML | DOM Meter optimum Property
09, Apr 19
HTML  | optimum Attribute
19, Feb 20
Compare the Case Insensitive strings in JavaScript
17, Apr 19
How to compare two JavaScript array objects using jQuery/JavaScript ?
11, Oct 19
What is the Efficient way to insert a number into a sorted array of numbers in JavaScript?
17, Sep 19
How to write a cell phone number in an international way using JavaScript ?
30, Dec 19
JavaScript code for adding new elements in a dynamic way
20, Sep 21
Fastest way to convert JavaScript NodeList to Array
21, Jul 20
What is the best way to add an event in JavaScript ?
13, Apr 21
What is the fastest way to loop through an array in JavaScript ?
03, Nov 20
How to compare date part only without comparing time in JavaScript?
30, Jan 20
JavaScript intl.collator.prototype.compare() Method
03, Mar 21
How to compare two objects to determine the first object contains equivalent property values to the second object in JavaScript ?
21, Apr 21
Compare two dates using JavaScript
15, Apr 19
How to compare two arrays in JavaScript ?
18, Apr 19
JavaScript | Replace multiple strings with multiple other strings
06, Jun 19
Best way to initialize empty array in PHP
31, Oct 18
What is the best way to include CSS file? Why use @import?
11, Feb 19
Best way to make a d3.js visualization layout responsive
08, Jul 19
What’s the best way to reload / refresh an iframe?
17, Jun 19
Best Way to Learn Node.js - A Complete Roadmap
18, Sep 20
Setting up environment variables in Node.js in a platform independent way
27, Oct 20
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
PranchalKatiyar
@PranchalKatiyar
Vote for difficulty
Current difficulty :
Easy





Improved By :
Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!