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:
xxxxxxxxxxconsole.log( 'a'.localeCompare('a') ); // 0 // a is equal to aconsole.log( 'a'.localeCompare('b') ); // -1 // a is before bconsole.log( 'b'.localeCompare('a') ); // +1 // b is after a
There are two approaches to comparing strings:
StringlocaleCompare()method - that returns information which one should be first according to alphabet letters priority.- comparators like:
<,>,==or===- that return onlytrueorfalsefor 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.
String localeCompare method returns -1, 0 or +1 value to inform which one should be first according to alphabet letters priority.
xxxxxxxxxxconsole.log( 'a'.localeCompare('a') ); // 0 // a is equal to aconsole.log( 'a'.localeCompare('b') ); // -1 // a is before bconsole.log( 'b'.localeCompare('a') ); // +1 // b is after aconsole.log( 'aab'.localeCompare('aab') ); // 0 // aab is equal to aabconsole.log( 'aac'.localeCompare('aaa') ); // +1 // aac is after aaaconsole.log( '123'.localeCompare('321') ); // -1 // 123 is before 321
With this approach, we need to make a few tests to know which one should be first.
xxxxxxxxxxconsole.log( 'a' == 'a' ); // trueconsole.log( 'a' < 'b' ); // trueconsole.log( 'b' > 'a' ); // trueconsole.log( 'aab' == 'aab' ); // trueconsole.log( 'aac' > 'aaa' ); // trueconsole.log( '123' < '321' ); // trueconsole.log( 'a' < 'a' ); // falseconsole.log( 'a' < 'b' ); // trueconsole.log( 'b' < 'a' ); // falseconsole.log( 'aab' > 'aab' ); // falseconsole.log( 'aac' > 'aaa' ); // trueconsole.log( '123' > '321' ); // falseIn 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.
xxxxxxxxxxfunction 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 aconsole.log( compareStrings('a', 'b') ); // -1 // a is before bconsole.log( compareStrings('b', 'a') ); // +1 // b is after aconsole.log( compareStrings('aab', 'aab') ); // 0 // aab is equal to aabconsole.log( compareStrings('aac', 'aaa') ); // +1 // aac is after aaaconsole.log( compareStrings('123', '321') ); // -1 // 123 is before 321
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.
xxxxxxxxxxfunction 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);}