中文汉字拼音排序之使用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>
相关推荐
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz4 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
星辰离彬4 小时前
Java 与 MySQL 性能优化:Java应用中MySQL慢SQL诊断与优化实战
java·后端·sql·mysql·性能优化
程序猿小D6 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统
ohMyGod_1236 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界6 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript