The question is to compare 2 JavaScript strings optimally. To do so, Here are a few of the most used techniques discussed. This method discussed below is used in one of the 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 tells whether the string comes before, after or is equal as the compareString in sort order.
Syntax:
string.localeCompare(String_2)
Parameters:
- String_2: This parameter is required. It specifies the string to be compared with.
Example-1: This example compares the 2 string using localeCompare() method and returns 0, -1 or 1. This method does case-sensitive comparing.
<!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:
-
Before clicking on the button:
-
After clicking on the button:
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.
<!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:
-
Before clicking on the button:
-
After clicking on the button:
Example-3: This example compares the 2 same string(case-sensitive also) by using localeCompare() method .
<!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:
-
Before clicking on the button:
-
After clicking on the button: