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...