本文介绍在 React 项目中，如何从形如 utmcsr=(direct)|utmcmd=(none)|utmccn=(not set) 的 Cookie 值中，高效、安全地提取指定键（如 utmcsr）对应的原始值（如 direct），并避免括号干扰。
本文介绍在 react 项目中，如何从形如 `utmcsr=(direct)|utmcmd=(none)|utmccn=(not set)` 的 cookie 值中，高效、安全地提取指定键（如 `utmcsr`）对应的原始值（如 `direct`），并避免括号干扰。
在实际开发中，我们常通过 js-cookie 等库读取埋点类 Cookie（如 initialTrafficSource），但其值往往是以管道符 | 分隔的键值对字符串，且每个值被括号包裹（如 (direct)）。若直接将整个字符串传入 API，会导致后端解析失败或数据失真。因此，必须在前端完成结构化解析。
以下是一个健壮、可复用的工具函数，支持从任意格式的 key=(value) 类字符串中提取目标字段：
function getUtmParam(cookieString: string, key: string): string | null {
if (!cookieString || typeof cookieString !== 'string') return null;
const pairs = cookieString.split('|');
for (const pair of pairs) {
const [k, v] = pair.split('=', 2); // 仅分割第一个等号，防止 value 中含 = 导致误切
if (k?.trim() === key && v !== undefined) {
// 移除首尾括号，同时兼容空格：(direct) → direct，( not set ) → not set
return v.trim().replace(/^[\(\)]+|[\(\)]+$/g, '');
}
}
return null;
}使用示例：
// 在表单初始化时解析
const initialTrafficSource = Cookies.get("initialTrafficSource");
const utmcsrValue = getUtmParam(initialTrafficSource, "utmcsr"); // 返回 "direct"
// 构造 API 请求体
const body = {
Source: utmcsrValue // ✅ 纯字符串，无括号、无空格污染
};✅ 关键优势说明：
- 使用 split('=', 2) 避免 utmccn=(not set) 中的空格和等号干扰；
- 正则 /^[\(\)]+|[\(\)]+$/g 精准剥离首尾所有括号（支持 ( (direct) ) 多层嵌套）；
- 显式类型检查与空值防护，防止运行时错误；
- 无副作用、纯函数，便于单元测试与跨组件复用。
⚠️ 注意事项：
- 若 Cookie 值为空、undefined 或非字符串类型，函数返回 null，建议在业务逻辑中做兜底处理（如默认值 '' 或 'unknown'）；
- 不推荐硬编码正则或多次 replace() 调用——本方案一次正则清理更高效；
- 如项目已引入 URLSearchParams 或 Lodash，也可改用 _.fromPairs()，但对简单场景反而增加包体积，原生方案更轻量。
通过该方法，你不仅能精准获取 utmcsr，还可无缝扩展至 utmcmd、utmccn 等任意 UTM 参数，为流量来源分析提供干净可靠的数据输入。
