vue3 URL 参数字符串按 ASCII 码升序排列

yg-c-v=V1&yg-c-k=IP/rXJXtPtAxhPC/BtaXFoJEJqzE49KEMOpRuOQHyxBQN0wNaFDSUTLgCqPFkJSg99AWRNrPlZpnpr5plKHFvkW/4DIdREQ/X15WYQHpBco1L/3qSs6HxktUJTtFiDZ55+PL7yA5EfW6IypD6Vn+wt8jlQs8NWYq8vKLwTC75KI=&yg-r-td=1&yg-r-ud=&yg-r-dd=0403a3d8bb1bb115fcdbe315256027ed&yg-r-tid=0403a3d8bb1bb115fcdbe315256027ed&yg-r-rc=&yg-r-v=R1&yg-s-t=1761015925491&yg-s-n=1761015926937-451776&yg-s-s&yg-s-v=S1&yg-i-c=yeguo&yg-i-v=1&yg-i-t=web&yg-i-o=yegu o

在 Vue 3 中，你可以编写一个方法来对给定的 URL 参数字符串按 ASCII 码升序排列。以下是实现代码：

/**
 * 将 URL 参数字符串按 ASCII 码升序排列
 * @param {string} queryString - URL 参数字符串（如 "key1=value1&key2=value2"）
 * @returns {string} - 排序后的参数字符串
 */
function sortQueryStringByASCII(queryString) {
  if (!queryString) return '';

  // 1. 按 & 分割成键值对数组
  const pairs = queryString.split('&');
  if (pairs.length === 0) return '';

  // 2. 分离键和值，并收集到数组中
  const entries = pairs.map(pair => {
    const [key, value = ''] = pair.split('='); // 处理无值的情况（如 "yg-s-s"）
    return { key, value };
  });

  // 3. 按键 ASCII 升序排序
  entries.sort((a, b) => a.key.localeCompare(b.key));

  // 4. 对值也按 ASCII 升序排序（如果需要）
  // 注意：通常只按键排序，但根据需求可以同时排序值
  // entries.sort((a, b) => {
  //   const keyCompare = a.key.localeCompare(b.key);
  //   return keyCompare !== 0 ? keyCompare : a.value.localeCompare(b.value);
  // });

  // 5. 重新拼接为参数字符串
  const sortedQueryString = entries
    .map(entry => `${entry.key}=${entry.value}`)
    .join('&');

  return sortedQueryString;
}

在 Vue 3 中使用
你可以在 Vue 3 的组件中这样使用:

<script setup>
import { ref } from 'vue';

const originalQueryString = ref('yg-c-v=V1&yg-c-k=IP/rXJXtPtAxhPC/BtaXFoJEJqzE49KEMOpRuOQHyxBQN0wNaFDSUTLgCqPFkJSg99AWRNrPlZpnpr5plKHFvkW/4DIdREQ/X15WYQHpBco1L/3qSs6HxktUJTtFiDZ55+PL7yA5EfW6IypD6Vn+wt8jlQs8NWYq8vKLwTC75KI=&yg-r-td=1&yg-r-ud=&yg-r-dd=0403a3d8bb1bb115fcdbe315256027ed&yg-r-tid=0403a3d8bb1bb115fcdbe315256027ed&yg-r-rc=&yg-r-v=R1&yg-s-t=1761015925491&yg-s-n=1761015926937-451776&yg-s-s&yg-s-v=S1&yg-i-c=yeguo&yg-i-v=1&yg-i-t=web&yg-i-o=yegu o');

const sortedQueryString = ref('');

function sortQuery() {
  sortedQueryString.value = sortQueryStringByASCII(originalQueryString.value);
}
</script>

<template>
  <div>
    <h2>原始字符串:</h2>
    <p>{{ originalQueryString }}</p>
    
    <button @click="sortQuery">排序</button>
    
    <h2>排序后:</h2>
    <p>{{ sortedQueryString }}</p>
  </div>
</template>

示例输出
对于你的输入字符串，排序后的结果将是：

yg-c-k=IP/rXJXtPtAxhPC/BtaXFoJEJqzE49KEMOpRuOQHyxBQN0wNaFDSUTLgCqPFkJSg99AWRNrPlZpnpr5plKHFvkW/4DIdREQ/X15WYQHpBco1L/3qSs6HxktUJTtFiDZ55+PL7yA5EfW6IypD6Vn+wt8jlQs8NWYq8vKLwTC75KI=&yg-c-v=V1&yg-i-c=yeguo&yg-i-o=yegu o&yg-i-t=web&yg-i-v=1&yg-r-dd=0403a3d8bb1bb115fcdbe315256027ed&yg-r-rc=&yg-r-td=1&yg-r-tid=0403a3d8bb1bb115fcdbe315256027ed&yg-r-ud=&yg-r-v=R1&yg-s-n=1761015926937-451776&yg-s-s=&yg-s-t=1761015925491&yg-s-v=S1