Optimum way to compare strings in JavaScript
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
Please Login to comment...