Havue

简体中文

English

简体中文

English

主题

字符串相关 ​

INFO

安装请参考工具函数安装。

字符串排序 stringSortFn ​

适用于类似微信联系人的排序规则：

  • 数字优先级最高，按从小到大排序
  • 英文和汉字按 26 个字母顺序排序，同字母时英文优先于汉字
  • 特殊符号优先级最低
  • 示例顺序：1abc > 3abc > aabc > 阿abc > babc > 菜菜菜菜111 > ！2abc

引入 ​

ts
import { stringSortFn } from 'havue'
// or
import { stringSortFn } from '@havue/tools'

函数签名 ​

stringSortFn(a: string, b: string, ignoreSpecialChar?: boolean): number

参数名说明类型默认值
a待比较字符串一string—
b待比较字符串二string—
ignoreSpecialChar是否忽略特殊字符后再比较（仅比较字母数字）booleanfalse

返回值：与 Array.sort 比较函数约定一致。负数表示 a 排在 b 前，正数表示 a 排在 b 后，0 表示相等。

示例 ​

列表项(List items):

aabc1abc阿abc3abc！2abc菜菜菜菜111babc

排序后(After sorting):

1abc3abcaabc阿abcbabc菜菜菜菜111！2abc
点我看代码
vue
<template>
  <div class="str-sort">
    <p>列表项(List items):</p>
    <div class="orgin">
      <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="InputRef"
        v-model="inputValue"
        class="input"
        size="small"
        @keyup.enter="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showInput"> + New Tag </el-button>
    </div>
    <p>排序后(After sorting):</p>
    <div class="after">
      <el-tag v-for="tag in sortedTags" :key="tag" :disable-transitions="false">
        {{ tag }}
      </el-tag>
    </div>
  </div>
</template>
vue
<script setup lang="ts">
import { nextTick, ref, computed } from 'vue'
import type { InputInstance } from 'element-plus'
import { stringSortFn } from '@havue/tools'

const inputValue = ref('')
const dynamicTags = ref(['aabc', '1abc', '阿abc', '3abc', '！2abc', '菜菜菜菜111', 'babc'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const sortedTags = computed(() => {
  const arr = [...dynamicTags.value]
  return arr.sort(stringSortFn)
})

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>
vue
<style lang="scss" scoped>
.str-sort {
  padding: 15px;
  background-color: cadetblue;

  .el-tag {
    margin-right: 5px;
  }

  .el-input {
    width: 100px;
  }
}
</style>

获取中文字符拼音首字母 getPinyinInitial ​

传入中文字符，返回其拼音首字母（大写 A–Z）。非中文或空字符串时返回原字符串。

引入 ​

ts
import { getPinyinInitial } from 'havue'
// or
import { getPinyinInitial } from '@havue/tools'

函数签名 ​

getPinyinInitial(str: string): string

参数名说明类型默认值
str中文字符串string—

返回值：拼音首字母大写，或非中文时原样返回。

示例 ​

中文(Chinese)：

拼音首字母(Pinyin first letter)：

点我看代码
vue
<template>
  <div class="get-pinyin">
    <p>中文(Chinese)：<el-input v-model:model-value="inputValue"></el-input></p>
    <p>拼音首字母(Pinyin first letter)：{{ pinyin }}</p>
  </div>
</template>
vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { getPinyinInitial } from '@havue/tools'

const inputValue = ref('')

const pinyin = computed(() => {
  return getPinyinInitial(inputValue.value)
})
</script>
vue
<style lang="scss" scoped>
.get-pinyin {
  padding: 15px;
  background-color: cadetblue;

  .el-input {
    width: 100px;
  }
}
</style>

按字节长度裁剪字符串 subStrByByteLen ​

按 UTF-8 字节长度截取字符串，不超过指定字节数。常用于按字节限制输入或展示长度。

引入 ​

ts
import { subStrByByteLen } from 'havue'
// or
import { subStrByByteLen } from '@havue/tools'

函数签名 ​

subStrByByteLen(str: string, byteLen: number): string

参数名说明类型默认值
str原始字符串string—
byteLen最大字节长度（UTF-8）number—

返回值：截取后不超过 byteLen 字节的字符串。

示例 ​

string：

byte length：

result：

点我看代码
vue
<template>
  <div class="sub-str">
    <p>string：<el-input v-model="str"></el-input></p>
    <p>byte length：<el-input-number v-model="subByteLen"></el-input-number></p>
    <p>result：{{ result }}</p>
  </div>
</template>
vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { subStrByByteLen } from '@havue/tools'

const str = ref('')
const subByteLen = ref(0)

const result = computed(() => {
  return subStrByByteLen(str.value, subByteLen.value)
})
</script>
vue
<style lang="scss" scoped>
.sub-str {
  padding: 15px;
  background-color: cadetblue;

  .el-input {
    width: 300px;
  }
}
</style>