当前位置：首页 > news >正文

js字符串对比之localeCompare()方法-对字符串进行排序——大于0-升序、小于0-降序对el-table的列进行排序sort-change

news 来源：原创 2024/5/20 14:06:00

js字符串对比之localeCompare()方法-对字符串进行排序——大于0-升序、小于0-降序 & 对el-table的列进行排序sort-change

js提供了字符串的对比方法localeCompare()，该方法返回的是一个数字用来表示一个参考字符串和对比字符串是排序在前，在后或者相同。该方法基本不单独使用，大部分时间是配合字符串排序使用的。

1、语法

string.localeCompare(targetString,locales,options);

参数:

targetString：对比字符串
locales：用来表示一种或多种语言或区域的一个符合 BCP 47 标准的字符串或一个字符串数组，如：‘zh’
options：是单个活对象组成的多个参数，主要的可以到MDN去查

2、返回值

返回值：是一个数字，目前的主流浏览器都返回的是1、0、-1三个值，但是也有其他情况，所以不可以用绝对的值等于1、-1这种去判断返回的结果

返回值大于0-升序：说明当前字符串string大于对比字符串targetString
返回值小于0-降序：说明当前字符串string小于对比字符串targetString
返回值等于0：说明当前字符串string等于对比字符串targetString

3、应用

3.1、单独使用

方法的单独调用：就是简单的去对比两个字符串，查看其返回值就好。

var str = 'aaa',
	strCom = 'bbb',
	strCom2 = 'aaa';
str.localeCompare(strCom); //-1
strCom.localeCompare(str); //1
str.localeCompare(strCom2); //0

3.2、配合排序使用

配合排序的调用：该方法用来单独比较字符串的情况比较少，大多数情况下是配合字符串的排序下使用的。

ar strList = ['cc', 'ee', 'ca', 'aa'];
 
strList.sort((a, b) => {
	return a.localeCompare(b);
});
console.log(strList);   //["aa", "ca", "cc", "ee"]

4、对el-table中的列进行排序

<template>
    <el-table
      ref="filterTable"
      :data="tableData"
      border
      :max-height="maxHeight"
      :highlight-current-row="true"
      @row-dblclick="rowDblClick"
      @sort-change="changeTableSort"
              >
      <el-table-column
        fixed
        label="序号"
        type="index"
        width="45"
      />
      <el-table-column
        label="检查规格号"
        prop="ruleId"
        min-width="105"
        :sortable="'custom'"
        show-overflow-tooltip
      />    
    </el-table>
</template>

<script>
export default{
 methods:{
    //排序触发事件
    changeTableSort({order}) {
      if (order === 'ascending') {
        this.tableData.sort((a, b)=> a.ruleId.localeCompare(b.ruleId, 'zh')); //a~z 排序
      } if (order === 'descending') {
        this.tableData.sort((a, b)=> b.ruleId.localeCompare(a.ruleId, 'zh')); //z~a 排序
      }
    },         
  }
}
</script>

5、复杂场景排序应用

排序效果

在这里插入图片描述

// 语言代码
const langCodeList = Object.freeze([
  { label: '大陆', value: 'CHI' },
  { label: '港澳', value: 'CHT' },
  { label: '英文', value: 'ENG' },
  { label: '葡文 ', value: 'POR' },
]);

var nameList = [
{NAME_CLASS:3,LANG_CODE:'CHI'},{NAME_CLASS:6,LANG_CODE:'BHI'},     {NAME_CLASS:7,LANG_CODE:'CHT'},{NAME_CLASS:1,LANG_CODE:'POR'},{NAME_CLASS:4,LANG_CODE:'CHI'},{NAME_CLASS:8,LANG_CODE:'CHT'},{NAME_CLASS:10,LANG_CODE:'CHI'},{NAME_CLASS:3,LANG_CODE:'ENG'},{NAME_CLASS:5,LANG_CODE:'CHI'}
]

         
nameList.sort((a, b)=> {
  //  1、LANG_CODE中文名称展示在前
  if ( a.NAME_CLASS === b.NAME_CLASS){
    return a.LANG_CODE.localeCompare(b.LANG_CODE);
  }
  //  2、NAME_CLASS排列优先级1>3>5>6>7>8>10>4
  if ( a.NAME_CLASS > b.NAME_CLASS  && b.NAME_CLASS !== 4 || a.NAME_CLASS === 4 ) {
    return 2;
  } else {
    return -2;
  }
});
console.log('排序后',nameList);