[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"blog-post-zh-compare-two-texts-online-diff-checker":3},{"id":4,"title":5,"author":6,"body":7,"description":334,"draft":335,"extension":336,"lang":337,"meta":338,"navigation":339,"path":340,"pubDate":341,"relatedTool":342,"seo":343,"stem":344,"tags":345,"__hash__":350},"blog\u002Fblog\u002Fzh-compare-two-texts-online-diff-checker.mdx","如何在线比较两段文本——Diff 工具使用指南","ujiffy team",{"type":8,"value":9,"toc":324},"minimark",[10,19,22,27,39,47,51,54,60,74,80,86,92,96,99,132,139,145,151,161,164,243,246,249,255,261,267,273,276,303,306,309,312,321],[11,12,13,14,18],"p",{},"改了配置文件，但忘了改了哪几行？同事发来一段\"更新过的\"代码，你需要知道改了什么？手动逐行比对，费时费力还容易出错。这时候，一个 ",[15,16,17],"strong",{},"Diff 工具","能在几秒钟内帮你搞定。",[11,20,21],{},"这篇文章带你了解 Diff 是什么、什么时候用、怎么读懂红绿高亮，以及在线工具和命令行方式各有什么优劣。",[23,24,26],"h2",{"id":25},"diff-是什么","Diff 是什么？",[11,28,29,30,34,35,38],{},"\"Diff\"来自 ",[31,32,33],"em",{},"difference","（差异）。在文本和代码的语境下，diff 就是",[15,36,37],{},"两个版本之间的变化记录","——哪些行被删除了、哪些行是新增的、哪些行没有变动。",[11,40,41,42,46],{},"这个概念来自 Unix 系统里的 ",[43,44,45],"code",{},"diff"," 命令，已经存在了几十年。如今，Git 的变更追踪、GitHub 的 Pull Request 视图、各种代码审查工具，背后都是 diff 的逻辑。",[23,48,50],{"id":49},"什么时候需要用-diff-工具","什么时候需要用 Diff 工具？",[11,52,53],{},"比你想象的场景多得多：",[11,55,56,59],{},[15,57,58],{},"代码审查（Code Review）","\n只想看改了哪里，不想重读整个文件？Diff 过滤掉没变的内容，只展示关键的变动。",[11,61,62,65,66,69,70,73],{},[15,63,64],{},"配置文件对比","\n线上环境出问题了，需要比对生产环境和测试环境的 ",[43,67,68],{},"nginx.conf"," 或 ",[43,71,72],{},"docker-compose.yml","？粘贴进去，一秒出结果。",[11,75,76,79],{},[15,77,78],{},"文档版本对比","\n写作或翻译时，对比两个草稿版本；团队协作时，快速看出别人改了哪些措辞——不需要版本控制系统也能做到。",[11,81,82,85],{},[15,83,84],{},"排查意外修改","\n某个文件被脚本或构建流程悄悄改动了，对比一下就能知道动了哪里。",[11,87,88,91],{},[15,89,90],{},"API 响应对比","\n两个版本的接口返回了不同的 JSON？粘进 Diff 工具，字段变化一览无余。",[23,93,95],{"id":94},"怎么读懂红绿高亮","怎么读懂红绿高亮？",[11,97,98],{},"大多数 Diff 工具用颜色来区分变化，规则很直觉：",[100,101,102,114,125],"ul",{},[103,104,105,106,109,110,113],"li",{},"🟥 ",[15,107,108],{},"红色（删除）"," — 这些行在",[15,111,112],{},"原始版本","里有，在新版本里被删掉了",[103,115,116,117,120,121,124],{},"🟩 ",[15,118,119],{},"绿色（新增）"," — 这些行是在",[15,122,123],{},"新版本","里加入的",[103,126,127,128,131],{},"⬜ ",[15,129,130],{},"灰白（未变）"," — 没有改动的行，显示为背景色，提供上下文",[11,133,134,135,138],{},"更好的工具还会做",[15,136,137],{},"行内高亮","——如果某行只改了一个词，只会高亮那个词，不是整行飘红。这对比较配置文件和文档特别有用，能精确定位到字符级别的变化。",[23,140,142,143],{"id":141},"在线工具-vs-命令行-diff","在线工具 vs 命令行 ",[43,144,45],{},[11,146,147,148,150],{},"Linux\u002FmacOS 自带的 ",[43,149,45],{}," 命令很强大，但输出格式不直观：",[152,153,158],"pre",{"className":154,"code":156,"language":157},[155],"language-text","\u003C 旧的这行\n---\n> 新的这行\n","text",[43,159,156],{"__ignoreMap":160},"",[11,162,163],{},"两者对比：",[165,166,167,185],"table",{},[168,169,170],"thead",{},[171,172,173,177,180],"tr",{},[174,175,176],"th",{},"特性",[174,178,179],{},"在线 Diff 工具",[174,181,182,183],{},"命令行 ",[43,184,45],{},[186,187,188,200,211,221,232],"tbody",{},[171,189,190,194,197],{},[191,192,193],"td",{},"可视化",[191,195,196],{},"✅ 彩色并排显示",[191,198,199],{},"❌ 纯文本符号",[171,201,202,205,208],{},[191,203,204],{},"是否需要安装",[191,206,207],{},"❌ 浏览器即用",[191,209,210],{},"✅ 需要终端环境",[171,212,213,215,218],{},[191,214,137],{},[191,216,217],{},"✅ 支持词\u002F字符级",[191,219,220],{},"⚠️ 需要额外参数",[171,222,223,226,229],{},[191,224,225],{},"适合分享",[191,227,228],{},"✅ 可以截图或链接分享",[191,230,231],{},"❌ 仅限本地",[171,233,234,237,240],{},[191,235,236],{},"适合场景",[191,238,239],{},"快速对比、与他人协作",[191,241,242],{},"脚本自动化、批量处理",[11,244,245],{},"如果只是临时对比两段文本，或者要把结果给不懂命令行的同事看，在线工具明显更方便。",[23,247,248],{"id":248},"使用技巧",[11,250,251,254],{},[15,252,253],{},"先统一格式再对比","。如果两个文件一个用 Tab 缩进、一个用空格，diff 会显示几乎每一行都变了。建议先格式化，或者开启\"忽略空白字符\"选项。",[11,256,257,260],{},[15,258,259],{},"保持左旧右新的习惯","。约定俗成：左边放原始版本，右边放修改后的版本。绿色 = 新版本新增的，红色 = 原版本有但被删掉的。方向搞反了容易看混。",[11,262,263,266],{},[15,264,265],{},"利用上下文行理解改动位置","。Diff 工具会在变化行的上下显示几行未改动的内容作为参照，帮助你判断这个改动发生在文件的哪个部分、改的是什么逻辑。",[11,268,269,272],{},[15,270,271],{},"代码用并排视图，长文用单列视图","。并排（side-by-side）方便同时阅读新旧两个版本，适合散文和文档；单列（unified）更紧凑，开发者看代码时常用。",[23,274,275],{"id":275},"一个典型的使用流程",[277,278,279,282,288,294,297,300],"ol",{},[103,280,281],{},"打开在线 Diff 工具",[103,283,284,285],{},"左侧粘贴",[15,286,287],{},"原始文本",[103,289,290,291],{},"右侧粘贴",[15,292,293],{},"修改后的文本",[103,295,296],{},"点击\"比较\"（或实时自动刷新）",[103,298,299],{},"扫一眼红绿高亮，找出所有变动",[103,301,302],{},"结合上下文行，理解每处改动的含义",[11,304,305],{},"整个过程不需要登录、不需要安装，30秒以内搞定。",[307,308],"hr",{},[11,310,311],{},"下次遇到需要对比两段文本的场景，不要再用眼睛盯着逐行找了。",[11,313,314],{},[315,316,318],"a",{"href":317},"\u002Fzh\u002Ftools\u002Fdiff-checker",[15,319,320],{},"立即使用 ujiffy Diff 工具 →",[11,322,323],{},"粘贴两段文本，差异立刻高亮显示——免费，无需注册。",{"title":160,"searchDepth":325,"depth":325,"links":326},2,[327,328,329,330,332,333],{"id":25,"depth":325,"text":26},{"id":49,"depth":325,"text":50},{"id":94,"depth":325,"text":95},{"id":141,"depth":325,"text":331},"在线工具 vs 命令行 diff",{"id":248,"depth":325,"text":248},{"id":275,"depth":325,"text":275},"用免费在线 Diff 工具快速找出两段代码、配置文件或文档之间的差异——无需下载，无需登录。",false,"mdx","zh",{},true,"\u002Fblog\u002Fzh-compare-two-texts-online-diff-checker","2025-05-17","diff-checker",{"title":5,"description":334},"blog\u002Fzh-compare-two-texts-online-diff-checker",[346,347,348,349],"diff工具","文本对比","开发者工具","代码审查","G3QSXsoo9l_7JHG70qC26ELgFmFJG7wcxVFG5mjmyxw",1778839887246]