日文视频标题参数被双重编码的问题求助

问题分析 #

你遇到的这个双重编码问题，核心原因是重复执行了URL编码操作：

• 你先用encodeURIComponent对日文标题做了一次编码，得到类似%E3%81%82...的结果
• 随后将这个编码后的字符串传给URLSearchParams，当调用queryParams.toString()时，URLSearchParams会自动对所有参数值再次执行URL编码——此时第一次编码产生的%符号会被重新编码成%25，最终就出现了双重编码的情况
• 英文标题看起来正常是因为：第一次编码后不会产生%这类需要二次编码的特殊字符，二次编码不会改变结果，但本质上你已经做了多余的编码操作

解决方案 #

直接去掉所有手动的encodeURIComponent调用，把原始参数值传给URLSearchParams即可——它会自动帮你完成符合标准的URL编码，包括处理多语言字符、特殊符号，完全不需要手动干预。

修改后的完整代码如下：

const generateVideoURL = async (
    vPath: string,
    videoTitle: string,
    completedId: string,
    startedAt: string,
    endedAt: string,
    testUrl: string
) => {
    const maxUrlLength = 2000;
  
    const estimatedOtherLength = 300;
    const maxTitleLength = maxUrlLength - estimatedOtherLength;

    let truncatedTitle = videoTitle;
    if (truncatedTitle.length > maxTitleLength / 3) {
        truncatedTitle =
            truncatedTitle.substring(0, maxTitleLength / 3) + '...';
    }
    // 移除所有手动编码，直接传递原始截断后的参数值
    const queryParams = new URLSearchParams({
        vPath,
        vtitle: truncatedTitle,
        cid: completedId,
        start: startedAt,
        end: endedAt,
    });

    if (route.query.continue === 'retest') {
        queryParams.append('continue', 'retest');
    }

    let finalURL = `${testUrl}?${queryParams.toString()}`;                    
};

额外说明 #

1. URLSearchParams的编码逻辑：它严格遵循URL编码规范，会自动将非ASCII字符、特殊符号（如&、=、%等）转换成符合要求的编码格式，功能完全覆盖encodeURIComponent，且能避免重复编码问题。
2. 你之前的标题截断逻辑（maxTitleLength / 3）是合理的：像日文这类非ASCII字符，编码后长度会变为原来的3倍左右，这个截断逻辑能有效避免最终URL超出长度限制。

备注：内容来源于stack exchange，提问作者Bimal Kafle