中文汉字拼音排序之使用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>
相关推荐
江城开朗的豌豆3 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子13 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆17 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山25 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45334 分钟前
css模块化以及rem布局
前端·javascript·css
feifeigo1237 小时前
升级到MySQL 8.4,MySQL启动报错:io_setup() failed with EAGAIN
数据库·mysql·adb
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web