localeCompare for Natural Sort?

Question

I'm developing a comic book reader and I have a few files (images) that the user uploads (File objects) and I'm using their filenames in order to sort them in the correct order.

I tried using localeCompare to perform a natural sort on them, but no luck...

The pages should be sorted in this manner:

page1
page2
page3
etc.

However, with my current code they are sorted like this:

page1  <------
page10
page11
page12
page13
page14
page15
page16
page17
page18
page19
page2  <------
page20
etc.

Here is the code I'm using in order to sort correctly:

( split() function is used to get image file name)

comicImages.sort((a, b) => {
        let aSplit = a.webkitRelativePath.split('/')
        let bSplit = b.webkitRelativePath.split('/')
        let compareResult = aSplit[2].localeCompare(bSplit[2], {numeric: true, sensitivity: 'base'})

        return compareResult
    })

Answer 1

localeCompare takes 3 arguments. The options object ( {numeric: true, sensitivity: 'base'} ) should be the third argument not the second.

//----------------------------------------v
input.sort((a,b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))

Live Example:

 const input = [ "page1", "page10", "page11", "page12", "page13", "page14", "other1", "other10", "other11", "other12", "other13", "other14", "other15", "other16", "other17", "other18", "other19", "other2", "other20", "page15", "page16", "page17", "page18", "page19", "page2", "page20", ]; //----------------------------------------v input.sort((a,b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'})) console.log(...input)