JavaScript - compare strings (e. g. for sorting / ordering)
In this article, we're going to have a look at how to compare two strings when we want to sort them in JavaScript.
There are two approaches to do it:
String
localeCompare
method - that returns information which one should be first according to alphabet letters priority.- comparators like:
<
,>
,==
or===
- that return onlytrue
orfalse
for commpared strings,
Second one approach requires minumum two tests to know about compared strings priority.
In below example you can see practical usage:
1. Compare with one method example
String
localeCompare
method returns -1, 0 or +1 value to inform which one should be first according to alphabet letters priority.
// ONLINE-RUNNER:browser;
console.log( 'a'.localeCompare('a') ); // 0 // aab is equal to aab
console.log( 'a'.localeCompare('b') ); // -1 // a is before b
console.log( 'b'.localeCompare('a') ); // +1 // b is after a
console.log( 'aab'.localeCompare('aab') ); // 0 // aab is equal to aab
console.log( 'aac'.localeCompare('aaa') ); // +1 // aac is after aaa
console.log( '123'.localeCompare('321') ); // -1 // 123 is before 321
2. Compare with comparators example
This with this approach we need to make few tests to know which one should be first.
// ONLINE-RUNNER:browser;
console.log( 'a' == 'a' ); // true
console.log( 'a' < 'b' ); // true
console.log( 'b' > 'a' ); // true
console.log( 'aab' == 'aab' ); // true
console.log( 'aac' > 'aaa' ); // true
console.log( '123' < '321' ); // true
console.log( 'a' < 'a' ); // false
console.log( 'a' < 'b' ); // true
console.log( 'b' < 'a' ); // false
console.log( 'aab' > 'aab' ); // false
console.log( 'aac' > 'aaa' ); // true
console.log( '123' > '321' ); // false
3. Custom compare method example
In this section we want to show how to write own compare method using operators.
Note: with this approach we are able to compare numbers, strings, dates and booleans without writing additional functions - so it can be easly used to sort data by any column, e.g. in last section with sorting array of objects.
// ONLINE-RUNNER:browser;
function compareStrings(a, b) {
if (a < b) return -1;
if (a > b) return +1;
return 0;
}
// Using example:
console.log( compareStrings('a', 'a') ); // 0 // aab is equal to aab
console.log( compareStrings('a', 'b') ); // -1 // a is before b
console.log( compareStrings('b', 'a') ); // +1 // b is after a
console.log( compareStrings('aab', 'aab') ); // 0 // aab is equal to aab
console.log( compareStrings('aac', 'aaa') ); // +1 // aac is after aaa
console.log( compareStrings('123', '321') ); // -1 // 123 is before 321
4. Sorting array of objects example
Approach presented in this section is universal - can be used to sort columns with different types. Check previous section (3. Custom compare method example) too see simplest example.
// ONLINE-RUNNER:browser;
function compareValues(a, b) {
if (a < b) return -1;
if (a > b) return +1;
return 0;
}
function sortArray(array, columnName) {
return array.sort(function(a, b) {
return compareValues(a[columnName], b[columnName]);
});
}
// Using example:
var array = [
{name: 'Chris', age: 30, joinedAt: new Date(2019, 1, 1)},
{name: 'Adel', age: 26, joinedAt: new Date(2010, 7, 23)},
{name: 'Kate', age: 21, joinedAt: new Date(2020, 5, 15)},
];
var columnName = 'joinedAt';
sortArray(array, columnName);
for (var i = 0; i < array.length; ++i) {
var entry = array[i];
console.log(entry.name + '\t' + entry.age + '\t' + entry.joinedAt);
}