alphaAndLengthSort-final.js

export const alphaAndLengthSort = (a,b) => {
	if(a[0] == b[0]) { // if first character is equal (this is important)
	  	return a.length - b.length  // compare by length, if equal then
        || a.localeCompare(b) // compare by dictionary order
    }else{
    	return a.localeCompare(b)
	}
}

alphaAndLengthSort.js

export const alphaAndLengthSort = (a, b) => {

    if(a.startsWith(b) || b.startsWith(a))
        return a.length - b.length ||   // compare by length, if equal then
            a.localeCompare(b);         // compare by dictionary order
    else
        return a.localeCompare(b);      // just compare by dictionary order
}


arr = ['Q1','Q11','Q111','Q12','Q15','B1111','B1']
arr.sort(alphaAndLengthSort) // => ["B1", "B1111", "Q1", "Q11", "Q111", "Q12", "Q15"]

/* Heres why things get hairy when you sort alpha-numerics alphabetically

A
AA
ABC //good
AC
B

1
11
123 //bad
13
2


*/

// FAILED: possible solution would be to sort numerically by converting string to base36 or base62 with https://www.npmjs.com/package/bases