String Related

INFO

For installation, please refer to Tool Functions Installation.

String sorting stringSortFn

WeChat contact-like sorting rules:

• Numbers have highest priority, sorted in ascending order
• English and Chinese sorted by 26-letter order; English before Chinese for same initial
• Special symbols have lowest priority
• Example order: 1abc > 3abc > aabc > 阿abc > babc > 菜菜菜菜111 > !2abc

Import

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

Signature

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

Parameter	Description	Type	Default
a	First string	string	—
b	Second string	string	—
ignoreSpecialChar	Ignore non-alphanumeric when comparing	boolean	false

Returns: Same as Array.sort comparator (negative / zero / positive).

Examples

列表项(List items):

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

排序后(After sorting):

1abc3abcaabc阿abcbabc菜菜菜菜111！2abc

Click to view code

template

<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>

script

<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>

style

<style lang="scss" scoped>
.str-sort {
  padding: 15px;
  background-color: cadetblue;

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

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

Get Chinese pinyin initial getPinyinInitial

Returns the pinyin initial (uppercase A–Z) for Chinese characters. Returns the original string for non-Chinese or empty input.

Import

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

Signature

getPinyinInitial(str: string): string

Parameter	Description	Type	Default
str	Chinese string	string	—

Returns: Uppercase initial letter, or original string if not Chinese.

Examples

中文(Chinese)：

拼音首字母(Pinyin first letter)：

Click to view code

template

<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>

script

<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>

style

<style lang="scss" scoped>
.get-pinyin {
  padding: 15px;
  background-color: cadetblue;

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

Substring by byte length subStrByByteLen

Truncates a string to at most the given UTF-8 byte length. Useful for byte-limited input or display.

Import

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

Signature

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

Parameter	Description	Type	Default
str	Original string	string	—
byteLen	Max byte length (UTF-8)	number	—

Returns: Substring not exceeding byteLen bytes.

Examples

string：

byte length：

result：

Click to view code

template

<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>

script

<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>

style

<style lang="scss" scoped>
.sub-str {
  padding: 15px;
  background-color: cadetblue;

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