JavaScript - compare strings

In this article, we're going to have a look at how to compare two strings when we want to sort them in JavaScript.

Quick solution:

// ONLINE-RUNNER:browser;

console.log( 'a'.localeCompare('a') );  //  0   // a is equal to a
console.log( 'a'.localeCompare('b') );  // -1   // a is before b
console.log( 'b'.localeCompare('a') );  // +1   // b is after a

Introduction

There are two approaches to comparing strings:

• String localeCompare() method - that returns information which one should be first according to alphabet letters priority.
• comparators like: <, >, == or === - that return only true or false for compared strings,

The second approach requires at least two tests to know about compared string's priority.

In the below examples you can see practical usage.

1. localeCompare() 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   // a is equal to a
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

With this approach, we need to make a few tests to know which one should be first.

2.1. Simple cases example

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

2.2. Reusable function example

In this section, we want to show how to write our own comparison 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   // a is equal to a
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

The approach presented in this section is universal - can be used to sort columns of different types. Check the previous section (3. Custom compare method example) to see the 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);
}

See also

1. JavaScript - universal way to compare values (boolean, number, string, Date, etc.)