AI 工具选择与 Prompt 技巧工欲善其事必先利其器。选对 AI 工具、写好 Prompt能让你的学习效率提升数倍。本文对比主流 AI 编程助手并提供即拿即用的 Prompt 模板。学习目标读完本文你将学会主流 AI 编程助手的特点对比与选择建议代码解释、纠错、重构三大场景的专用 Prompt让 AI 用更通俗语言讲解的技巧追问与迭代的策略一、主流 AI 编程助手对比1.1 工具概览工具开发商免费额度特点推荐指数ClaudeAnthropic有免费版代码能力强、上下文长、解释详细⭐⭐⭐⭐⭐ChatGPTOpenAI有免费版通用能力强、GPT-4 代码优秀⭐⭐⭐⭐⭐通义千问阿里云有免费版中文友好、国内访问稳定⭐⭐⭐⭐文心一言百度有免费版中文理解好、集成百度生态⭐⭐⭐⭐GitHub CopilotGitHub付费/学生免费IDE 内联补全、自动补代码⭐⭐⭐⭐1.2 初学者选择建议预算充足每月 20 美元左右主力ChatGPT PlusGPT-4或Claude Pro辅助GitHub Copilot写代码时自动补全这样组合学习效率最高预算有限免费方案主力Claude 免费版claude.ai需要科学上网备选通义千问国内直接访问qianwen.aliyun.com备选文心一言国内直接访问yiyan.baidu.comChatGPT 免费版GPT-3.5也能用但代码能力弱于 Claude我的建议如果你是初学者先用通义千问或文心一言入门中文界面、国内稳定等遇到复杂问题再尝试 Claude。不要纠结选哪个先选一个用起来。1.3 各工具在编程学习中的优势场景推荐工具原因解释复杂概念Claude擅长逐步推导解释细致代码纠错ChatGPT / Claude能准确找出 bug 并修复代码重构Claude重构后的代码质量高快速提问通义千问国内访问快无需等待写代码时自动补全GitHub Copilot直接在 IDE 中提示生成练习题任意工具效果都不错二、Prompt 技巧让 AI 听懂你的话2.1 什么是 PromptPrompt 就是你发给 AI 的那段文字。同样的 AIPrompt 写得好不好回答质量天差地别。示例对比❌ 差的 Prompt✅ 好的 Prompt“解释闭包”“我是 JS 初学者请用’背包’类比解释闭包并给一个 5 行以内的代码示例”“这段代码错了吗”“这段代码预期输出 10实际输出 undefined请找出原因并修复[粘贴代码]”2.2 写好 Prompt 的 5 个原则原则 1给 AI 一个角色❌ 解释 Promise ✅ 你是一位有 10 年经验的前端工程师正在教一位初学者理解 Promise。请用通俗易懂的方式解释...给 AI 设定角色它会自动调整语言风格和深度。原则 2提供足够的上下文❌ 这个报错怎么解决 ✅ 我在学习 JavaScript 第 12 篇闭包遇到了这个报错TypeError: ... 我的代码是... 我的理解是... 请帮我分析原因。AI 不知道你学到哪里、用什么环境这些信息都要主动提供。原则 3明确输出格式❌ 讲讲数组方法 ✅ 请用表格形式对比 map、filter、reduce 三个方法 表格包含方法名、作用、是否改变原数组、返回值、适用场景告诉 AI 你要什么格式表格、列表、代码、图解它会按要求组织内容。原则 4分步骤提问❌ 教我异步编程 ✅ 第一步回调函数是什么请用餐厅等餐的类比解释。 第二步回调地狱是什么问题给一段 3 层嵌套的示例代码。 第三步Promise 是怎么解决这个问题的复杂问题拆成小块AI 回答更精准你也更容易消化。原则 5要求举例和反例✅ 请解释 和 的区别给 3 个正确使用的例子和 2 个容易出错的反例例子帮你理解反例帮你避坑。三、三大核心场景解释、纠错、重构场景一让 AI 解释代码标准模板请逐行解释以下 JavaScript 代码 javascript [粘贴你的代码]要求每行代码用一句话解释它的作用解释这行代码执行时的内存变化如果有标出这行代码可能存在的坑或注意点如果这行可以用更现代的语法改写请给出替代写法**示例** javascript const obj { name: 小明, sayHi: function() { setTimeout(function() { console.log(Hi, this.name); }, 100); } }; obj.sayHi();期望的 AI 回答结构第 1 行创建对象字面量…第 4 行this.name这里有问题setTimeout中的普通函数this指向全局对象…修复建议改用箭头函数…场景二让 AI 纠错代码标准模板我的 JavaScript 代码运行结果不符合预期。 预期行为[描述你希望代码做什么] 实际行为[描述实际发生了什么包括报错信息] javascript [粘贴你的代码]运行环境[浏览器 / Node.js 版本]请帮我找出问题所在的具体位置解释为什么会这样原理层面给出修复后的完整代码告诉我以后怎么避免类似的错误**关键技巧** - 一定要描述预期 vs 实际不要只贴代码 - 提供报错信息的完整文本 - 说明运行环境浏览器还是 Node.js ### 场景三让 AI 重构代码 **标准模板**请帮我重构以下 JavaScript 代码[粘贴你的代码]重构要求使用 ES6 现代语法箭头函数、解构、模板字符串等保持原有功能不变提高代码可读性[其他特殊要求如减少嵌套层级 / 提取公共函数 / 添加错误处理]请输出重构后的完整代码每处改动的说明改了什么 为什么这样改--- ## 四、让 AI 讲得更通俗的技巧 ### 4.1 指定类比对象✅ “请用’餐厅点餐’的类比解释事件循环”✅ “请用’快递物流’的类比解释 Promise 的执行过程”✅ “请用’俄罗斯套娃’的类比解释原型链”指定你熟悉的领域AI 会围绕这个场景构建类比。 ### 4.2 要求分层讲解✅ “请分三层解释这个概念第一层用一句话告诉我它是什么给完全不懂的人第二层解释它的核心原理给刚入门的人第三层讲实际应用和注意事项给要写代码的人”### 4.3 要求对比讲解✅ “我不知道什么是闭包但我熟悉 Python 的函数。请对比 Python 函数和 JS 闭包的异同用我已经知道的知识来解释新概念。”### 4.4 要求可视化描述✅ “请用文字描述这个代码执行过程中内存中的变化。用 ‘[]’ 表示栈用 ‘{}’ 表示堆每一步都画出当前的状态。”--- ## 五、追问与迭代的策略 ### 5.1 没听懂时的追问话术 | 你的状态 | 追问话术 | |----------|----------| | 整体没懂 | 我还是没理解请用更简单的语言或者换一个类比再讲一遍 | | 某个词不懂 | 你提到的词法作用域是什么意思请单独解释这个概念 | | 某行代码不懂 | 请单独解释第 5 行代码越详细越好 | | 太抽象了 | 这个概念太抽象了请给我一个实际开发中的使用场景 | | 想知道为什么 | 为什么要这样设计如果不这样会有什么后果 | ### 5.2 想深入时的追问话术 | 你想了解 | 追问话术 | |----------|----------| | 性能影响 | 这种写法在大数据量下性能如何有没有更优的方案 | | 兼容性 | 这个语法在旧版浏览器中支持吗需要做兼容处理吗 | | 最佳实践 | 在实际项目中这是推荐的做法吗团队代码规范一般怎么写 | | 相关概念 | 这个概念和【另一个概念】有什么关系先学哪个更好 | | 常见面试题 | 这个概念在前端面试中怎么考给我两道常见的面试题 | ### 5.3 发现 AI 回答有问题时的处理 **情况 1AI 说得太复杂**“你的解释对我来说还是太难了。假设我是一个刚学编程的高中生请用我能听懂的话再讲一遍。”**情况 2AI 给出了错误信息**“根据我查到的资料【某个点】似乎和你说的不一致。MDN 上的文档说…你能再确认一下吗”**情况 3AI 遗漏了重要内容**“你提到了 A 和 B但我记得还有 C 也很重要。能补充一下 C 的内容吗”--- ## 六、动手练习 ### 练习 1写一个解释代码的 Prompt 给你以下代码写一个 Prompt 发给 AI要求它逐行解释 javascript function createCounter() { let count 0; return { increment: function() { count; return count; }, decrement: function() { count--; return count; } }; } const counter createCounter(); console.log(counter.increment()); console.log(counter.increment()); console.log(counter.decrement());参考答案我是 JavaScript 初学者正在学习闭包的概念。 请逐行解释以下代码 javascript function createCounter() { let count 0; return { increment: function() { count; return count; }, decrement: function() { count--; return count; } }; } const counter createCounter(); console.log(counter.increment()); console.log(counter.increment()); console.log(counter.decrement());要求每行代码解释它的作用重点解释为什么count变量在createCounter执行后还能被访问指出这段代码体现了闭包的哪个核心特征如果我把let count 0改成var count 0结果会有变化吗给我一道类似的练习题让我巩固理解/details ### 练习 2写一个纠错的 Prompt 以下代码预期输出 [2, 4, 6]实际输出却是 [undefined, undefined, undefined] javascript const nums [1, 2, 3]; const doubled nums.map(function(num) { num * 2; }); console.log(doubled);请写一个完整的纠错 Prompt 发给 AI。参考答案我的 JavaScript 代码运行结果不符合预期。 预期行为对数组 [1, 2, 3] 的每个元素乘以 2返回 [2, 4, 6] 实际行为返回 [undefined, undefined, undefined] 运行环境Chrome 浏览器控制台 javascript const nums [1, 2, 3]; const doubled nums.map(function(num) { num * 2; }); console.log(doubled);请帮我找出问题所在的具体位置解释为什么map回调函数没有返回值时会导致 undefined给出修复后的代码用箭头函数的简洁写法告诉我map、filter、forEach三个方法在是否需要 return这一点上有什么区别/details ### 练习 3实际使用 打开你选择的 AI 工具Claude / ChatGPT / 通义千问把练习 1 或练习 2 的 Prompt 发给它。观察它的回答然后用本文学到的追问技巧再问它至少 2 个跟进问题。 --- ## 七、AI 辅助学习 ### 7.1 本节知识点的 AI 提问模板我正在学习如何选择 AI 工具和写 Prompt。我已经了解不同的 AI 工具有不同的优势Prompt 需要包含背景、问题、期望。我的困惑是【描述你遇到的困惑比如不知道怎么判断 AI 回答的质量/追问时总是问不到点上等】请给我 3 个可以直接套用的追问话术并说明在什么场景下使用。### 7.2 用 AI 验证你的理解 - 把练习 1 和练习 2 的 Prompt 发给 AI对比它的回答和参考答案的差异 - 问 AI请列举 5 个初学者写 Prompt 的常见错误并给出改进版本 - 让 AI 出一道写 Prompt的测试题检验你是否掌握了技巧 ### 7.3 警惕 AI 的常见错误 - AI 有时会推荐已经过时或不存在的工具建议以官方渠道信息为准 - AI 给出的 Prompt 模板可能过于通用建议根据实际情况调整 - 不同 AI 工具对同样的 Prompt 回答质量可能不同可以多尝试几个 --- ## 八、本章小结 - **工具选择**初学者先用通义千问/文心一言复杂问题用 Claude/ChatGPT - **Prompt 五原则**给角色、给上下文、明格式、分步骤、要举例 - **三大场景模板**解释代码逐行 内存 坑点、纠错预期 vs 实际、重构ES6 说明改动 - **通俗化技巧**指定类比、分层讲解、对比已知知识、要求可视化 - **追问策略**没懂就要求更简单深入就问性能/兼容/面试题发现错误就引用资料质疑 --- ## 十、下篇预告 下一篇进入正式语法学习**《JavaScript 是什么历史、用途与运行原理》**你将了解 - JavaScript 的诞生故事只用了 10 天设计出来的语言 - ECMAScript 是什么和 JavaScript 有什么关系 - JavaScript 能做什么网页、服务器、App、甚至人工智能 - 浏览器和 Node.js 两种运行环境的区别 --- 如果本文对你有帮助欢迎点赞、收藏、关注专栏。有任何问题可以在评论区交流