JavaScript Strings
JavaScript String Comparison
Strings compare character by character using their character codes.
This is why "Z" < "a" is true.
It also explains why sorting names can produce odd results.
Example
Example
javascript
console.log("apple" < "banana");
console.log("Z" < "a");Both are true.
Every uppercase letter comes before every lowercase one.
How Comparison Works
Characters are compared one at a time, left to right.
The first difference decides the result.
The comparison uses character codes, where uppercase comes first.
Syntax
Syntax
javascript
a === b;
a.localeCompare(b);localeCompare understands letters properly.
Equality Is Exact
Any difference at all, including case and spacing, makes them unequal.
Example
Example
javascript
console.log("ada" === "ada");
console.log("ada" === "Ada");
console.log("ada" === "ada ");Trim and lowercase before comparing text from a person.
Sorting Surprises
The default sort puts all capitals before all lowercase.
Example
Example
javascript
const names = ["Zebra", "apple", "Mango"];
console.log(names.slice().sort().join(","));Zebra beat apple purely because Z is uppercase and a is not.
Sorting Properly
localeCompare compares the way a person would expect.
Example
Example
javascript
const names = ["Zebra", "apple", "Mango"];
const sorted = names.slice().sort(function (a, b) {
return a.localeCompare(b);
});
console.log(sorted.join(","));Now the order is alphabetical regardless of case.
What localeCompare Returns
A negative number, zero, or a positive number - exactly what sort wants.
Example
Example
javascript
console.log("a".localeCompare("b") < 0);
console.log("b".localeCompare("a") > 0);
console.log("a".localeCompare("a"));The output is true, true, 0.
Comparing Fairly
Normalise both sides before deciding they differ.
Example
Example
javascript
const entered = " Ada ";
const stored = "ada";
console.log(entered === stored);
console.log(entered.trim().toLowerCase() === stored);The output is false then true.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String Comparison</title>
</head>
<body>
<h1>String Comparison</h1>
<p id="out"></p>
<script>
const names = ["Zebra", "apple", "Mango"];
const plain = names.slice().sort();
const proper = names.slice().sort(function (a, b) {
return a.localeCompare(b);
});
document.getElementById("out").innerHTML =
"Default sort: " + plain.join(", ") +
"<br>localeCompare sort: " + proper.join(", ") +
"<br>Z < a: " + ("Z" < "a");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try more names:
Add a few with mixed capitals and compare the two sorts.
Important Points
- Strings compare character by character.
- Uppercase letters come before lowercase ones.
- Equality is exact, including case and spaces.
localeComparesorts the way people expect.- Trim and lowercase before comparing user input.
Conclusion
Character-code ordering explains most surprising sort results.
localeCompare is the right tool for sorting text.
Normalising both sides makes comparison fair.