Optimum way to compare strings in JavaScript

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
bhaskargeeksforgeeks
simranarora5sos
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?