如何通过jQuery向YouTube API动态传递参数？

DevOps 小满

2026-5-21

解决YouTube API请求中动态参数名的jQuery写法问题

你遇到的「unexpected string」错误，根源在于JavaScript对象字面量的语法限制——在ES5及更早的版本中，对象字面量里的属性名必须是固定的字符串或标识符，不能直接用变量/表达式当作属性名。你直接把$("#subtype").val()写在冒号左边的写法，属于语法错误，浏览器无法解析，自然会报错，最终导致API请求缺失必要参数。

方法一：ES5兼容写法（推荐兼容旧浏览器）

先创建基础参数对象，再用方括号语法动态添加可变参数，这是最稳妥的兼容写法：

// 1. 初始化基础请求参数
var requestParams = {
  part: "contentDetails",
  key: "MY-API-KEY"
};

// 2. 动态添加可变查询参数（id或forUsername）
var paramName = $("#subtype").val();
var paramValue = $("#url").val();
requestParams[paramName] = paramValue;

// 3. 发起API请求
$.get("https://www.googleapis.com/youtube/v3/channels", requestParams, function(response) {
  // 这里写处理响应的逻辑
  console.log("API响应结果:", response);
});

方法二：ES6计算属性名写法（简化版）

如果你的项目不需要兼容IE等旧浏览器，可以直接用ES6的计算属性名语法，在对象字面量中直接使用表达式作为属性名：

$.get("https://www.googleapis.com/youtube/v3/channels", {
  part: "contentDetails",
  // 用方括号包裹表达式，动态生成属性名
  [$("#subtype").val()]: $("#url").val(),
  key: "MY-API-KEY"
}, function(response) {
  console.log("API响应结果:", response);
});