Ways to Compare Two Strings in JavaScript

A string represents a sequence of characters that can contain numbers, letters, spaces, and symbols. In JavaScript, strings are created by enclosing characters within double quotes, single quotes, or backticks.

Example:

const string1= "JavaScript"; //using double quotes to create a string
const string2= 'JavaScript'; //using single quotes to create a string
const string3= `JavaScript`; //using backticks to create a string

In certain situations, it becomes necessary to compare two strings for purposes such as login authentication and other validation processes. This article will delve into different methods of comparing strings in JavaScript.

The techniques employed for comparing strings include:

-

• ✅ : localeCompare method

-

• ✅ : Mathematical Operators

Let us comprehend each with the help of examples.

localeCompare

This technique is employed to compare two strings within the current locale according to their alphabetical order.

Syntax:

string1.localeCompare(string1)

This method returns 1, 0, or -1.

If string1 is larger than string2, this function will return a value of 1.

If the length of string1 is less than that of string2, this function will return a value of -1.

When string1 is equivalent to string2, this function will return a value of 0.

Below are the examples that showcase how to compare two strings using the localeCompare function:

Demo 1:

Let's analyze the comparison between the strings "Welcome" (string1) and "here!" (string2) to observe the resulting output.

Code:

const string1 = "Welcome";
const string2 = "here!";

const compareValue = string1.localeCompare(string2);
console.log(compareValue);

Output:

Explanation:

In the demonstration above, when comparing the strings "Welcome" and "here!", the function returns 1 because "Welcome" is considered greater than "here!" due to the alphabetical order. Specifically, in this case, the letter 'w' comes after 'h' in the alphabet, making string1 greater than string2.

Demo 2:

Let's examine the comparison between the strings "tomato" and "zomato" to observe the outcome.

Code:

const string1 = "tomato";
const string2 = "zomato";

const compareValue = string1.localeCompare(string2);
console.log(compareValue);

Output

Explanation:

In the demonstration above, the string1 "tomato" is considered less than string2 "zomato", resulting in a return value of -1. This is because, in alphabetical order, the letter 't' precedes 'z', indicating that string1 is smaller than string2.

Demo 3:

Let's examine the comparison between string1 "burger" and string2 "burger" to observe the outcome.

Code:

const string1 = "burger";
const string2 = "burger";

const compareValue = string1.localeCompare(string2);
console.log(compareValue);

Output:

Explanation:

In the demonstration shown above, the function compares the alphabetical order of the characters in two strings, string1 "burger" and string2 "burger". Since both strings have the same alphabetical order, the function returns 0.

Demo 4:

Let's analyze the outcome of comparing the strings "swag" and "Swag".

Code:

const string1 = "swag";
const string2 = "Swag";

const compareValue = string1.localeCompare(string2);
console.log(compareValue);

Output

Explanation:

In the demonstration above, the comparison between the strings "swag" and "Swag" results in "swag" being considered smaller than "Swag" due to the lower ASCII value of 's' compared to 'S'. As a result, the comparison operation returns -1.

Note: Some browsers return any value less than 0 for a smaller string instead of -1 and any value greater than 0 for a greater string instead of 1.

Mathematical Operators

Mathematical operators like less than (<) or equal to (==) can be employed for comparisons. This functionality is akin to the localeCompare method, as it assesses two strings based on their alphabetical order.

Below are the examples illustrating how to compare two strings using arithmetic operators:

Demo 1:

To determine if string1 is greater than string2, we will utilize the less than (<) mathematical operator to check whether string1 is smaller than string2 or not. It returns a boolean value, i.e., true or false.

Code:

const string1= "JavaScript"; //using double quotes to create a string
const string2= 'JavaScript'; //using single quotes to create a string
const string3= `JavaScript`; //using backticks to create a string

Output:

Explanation:

In the above demo, string1 "BMW" is greater than string2 "Audi" on the basis of alphabetical order, so it returns false.

Demo 2:

We will use the greater than (>) comparison operator in mathematics.

Code:

const string1 = "html";
const string2 = "css";

console.log(string1 > string2);

Output:

Explanation:

In the demonstration above, the comparison indicates that "html" is considered greater than "css" in terms of alphabetical order, resulting in a true outcome.

Demo 3:

The equality operator (==) will be utilized to verify if string1 is equivalent to string2.

Code:

const string1 = "JavaScript";
const string2 = "JavaScript";

console.log(string1 == string2);

Output:

Explanation:

In the demonstration above, the string1 "JavaScript" is considered smaller than string2 "JavaScript" due to alphabetical order comparison, resulting in a true return.

Conclusion:

In this tutorial, we have explored the concept of comparing strings in JavaScript. String comparison can be achieved through the use of the localeCompare function as well as mathematical operators like less than (<) or equal to (==). Each of these techniques has been explained in detail through practical demonstrations.