中文汉字拼音排序之使用localeCompare和CONVERT(sortWord USING gbk)前后端操作

正常后端的SQL排序

正常排序，前端发请求，将排序字段和排序方式（升序or降序）传给后端
后端接口收到相关参与，执行SQL语句查询数据库并返回，如：
SELECT * FROM table ORDER BY ${req.query.sortWord} ${req.query.sortOrder}

若是排序中夹杂着中文排序，如笔者的这个网站效果：ashuai.work:8889/

效果图如下：

就要使用ORDER BY CONVERT(ColumnName USING gbk)函数了
后端直接把前端的请求参数拼接sql，执行即可

如：select * from table ORDER BY CONVERT( ${req.query.sortWord} USING gbk ) ${req.query.sortOrder}

某些情况中文拼音排序

某些场景下，需要前端去使用中文拼音去进行排序
前端是没有sql语句能够用的，不过js提供了一个localCompare方法可使用

localCompare方法

local是当地的意思
compare是比较的意思
就是用当地的语言编码字符习惯进行比较

中文就是拼音前后比较【带四声前后】

js 复制代码

let str1 = '阿'
let str2 = '波'
let str3 = '词'
let result1 = str1.localeCompare(str2)
let result2 = str2.localeCompare(str1)
let result3 = str3.localeCompare(str3)

console.log('result1', result1); // -1
console.log('result2', result2); // 1
console.log('result3', result3); // 0

/*
    返回 -1 代表 按照拼音顺序 '阿'排在'波'前面
    返回 1 代表 按照拼音顺序 '波'排在'阿'前面
    返回 0 代表 按照拼音顺序 位置相同
*/

搭配sort方法就可以实现中文排序了
为了更直观的看到效果，笔者写了一个小demo
如下效果图

案例效果图

案例demo代码

复制粘贴跑一下，顺带回顾一下js知识

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击切换排序</button>
    <h2 label="标题">---排序---</h2>
    <script>
        // 获取当前页面的最后一个h2元素
        function getLastH2() {
            const h2List = document.querySelectorAll('h2')
            return Array.from(h2List).at(-1)
        }

        // 把新dom元素追加在目标dom元素后【原生js只有insertBefore方法，insertAfter要自己写】
        function insertAfter(newDom, targetDom) {
            let parent = targetDom.parentNode; // 得到父级元素
            if (parent.lastChild == targetDom) {
                // 若当前目标元素是最后一个，直接追加即可
                parent.appendChild(newDom);
            } else {
                // 若当前目标不是最后一个，就在目标的后面之前加一个（即往后平级追加）
                parent.insertBefore(newDom, targetDom.nextSibling);
            }
        }

        // 清空除去label的所有h2
        function removeH2WithoutLabel() {
            const h2List = document.querySelectorAll('h2')
            Array.from(h2List).forEach((h2) => {
                if (!h2.hasAttribute('label')) {
                    h2.parentNode.removeChild(h2);
                }
            })
        }

        let isAsc = true // 默认拼音正序
        const btn = document.querySelector('button')

        let textArr = ['阿', '波', '词', '得', '鹅', '佛', '格', '河']

        btn.onclick = () => {
            removeH2WithoutLabel()
            textArr.sort((a, b) => {
                if (isAsc) {
                    return a.localeCompare(b) // 正序
                } else {
                    return b.localeCompare(a) // 倒序
                }
            });
            isAsc = !isAsc
            textArr.forEach((text) => {
                let h2Dom = document.createElement('h2')
                h2Dom.innerText = text
                const lastH2 = getLastH2()
                insertAfter(h2Dom, lastH2)
            })
        }
    </script>
</body>

</html>