文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文基于本仓库 1-js/05-data-types/03-string/3-truncate 这一字符串截断练习完整还原题目要求、官方解题思路与可运行实现并结合仓库中的测试用例与 字符串章节 的底层知识深入解析length属性、slice截取语义以及 Unicode 省略号字符的取舍。读完本文你将掌握一个健壮、可复用的定长截断函数写法并理解其背后容易踩坑的三个关键点。一、练习目标把超长文本截断到指定长度这是 Modern JavaScript Tutorial 字符串章节1-js/05-data-types/03-string/article.md中的一道练习题task.md要求如下创建一个函数truncate(str, maxlength)检查str的长度如果超过maxlength就用省略号字符…替换str的结尾部分使最终结果的长度恰好等于maxlength否则原样返回。题目给出的验收示例truncate(What Id like to tell on this topic is:, 20) What Id like to te… truncate(Hi everyone!, 20) Hi everyone!这类「超长文本自动截断」是 UI 开发中的高频需求——列表标题、卡片摘要、面包屑导航等场景都需要在有限宽度内展示文本并给出“还有更多”的视觉暗示truncate就是这一需求的纯函数化封装。二、官方解题思路两个关键决策官方参考答案位于 solution.md其思路只有两步但每一步都对应一个易错点。1. 截断长度必须是maxlength - 1而不是maxlength题目要求“最终结果长度等于maxlength”。省略号本身也要占长度所以不能直接str.slice(0, maxlength)再拼省略号否则结果是maxlength 1个字符超出限制正确做法是截取maxlength - 1个字符为省略号预留一个字符的位置拼接后总长度恰好为maxlength。如果你的需求是“正文最多显示 N 个字符、省略号额外附加”那么可以不减 1但本练习的硬性验收标准是含省略号在内的总长度等于maxlength因此必须预留。2. 省略号是一个 Unicode 字符而不是三个点这是本练习强调的第二点省略号应该使用单个 Unicode 字符…U2026HORIZONTAL ELLIPSIS而不是三个英文句点...。两者在语义和长度上完全不同写法字符数说明…U20261一个 Unicode 省略号字符排版美观、语义标准...三个点3三个普通句点占用 3 个字符位如果用...预留一个位置根本不够总长度会变成maxlength 2只有使用单个…maxlength - 1 1的等式才成立。这也是为什么题目示例的输出是What Id like to te…——注意它只保留了 19 个字符再加 1 个省略号。三、完整实现可运行的最终代码仓库中 solution.js 给出了可直接运行的标准答案function truncate(str, maxlength) { return (str.length maxlength) ? str.slice(0, maxlength - 1) … : str; }逐行拆解str.length maxlength先判断是否需要截断。若字符串本来就不超长如Hi everyone!长度为 13maxlength为 20直接返回原字符串不做任何改动str.slice(0, maxlength - 1)取前maxlength - 1个字符slice的end参数不包含在内为省略号留位 …拼接单个 Unicode 省略号字符使最终结果长度恰好等于maxlength三目运算符保证了「短字符串原样返回、长字符串截断」两种分支各归其位。这段实现与 solution.md 中的写法完全一致可直接复制到浏览器控制台或 Node.js 中验证truncate(What Id like to tell on this topic is:, 20); // What Id like to te… truncate(Hi everyone!, 20); // Hi everyone!四、测试用例仓库如何验证正确性仓库为每道练习都配套了 Mocha 风格的测试文件本练习的测试位于 test.jsdescribe(truncate, function() { it(truncate the long string to the given length (including the ellipsis), function() { assert.equal( truncate(What Id like to tell on this topic is:, 20), What Id like to te… ); }); it(doesnt change short strings, function() { assert.equal( truncate(Hi everyone!, 20), Hi everyone! ); }); });两个用例恰好覆盖了truncate的两条分支长字符串分支验证超长文本被截断且截断结果含省略号长度等于maxlength内容与题目示例完全一致短字符串分支验证不超过maxlength的字符串被原样返回不发生任何改变。测试的组织方式describe/it/assert.equal与本仓库 测试入门章节 介绍的 Mocha 测试框架一致体现了 Modern JavaScript Tutorial “每个练习都有可验证测试”的一贯设计。五、原理深挖为什么用slice而不是substring/substrtruncate的截取动作依赖str.slice(start, end)。在 字符串章节 中官方系统对比了三种取子串方法方法选区规则负数支持slice(start, end)从start到end不含end支持负数substring(start, end)start与end之间不含end负数按0处理substr(start, length)从start起取length个字符支持负的start选择slice的理由很实际语义清晰slice(0, maxlength - 1)明确表达“从开头取到第maxlength - 1个字符之前”更灵活slice支持负索引从末尾计数虽然本题用不到但它是三者中官方推荐记住的那一个——字符串章节 明确指出“实际使用中记住slice就够了”无历史包袱substr定义在 ECMA-262 规范的 Annex B 中属于主要为浏览器兼容而存在的特性官方不推荐在非浏览器环境依赖它。此外str.length是一个数值属性而非函数调用时不能写成str.length()字符串章节 对此有专门警告。本题中str.length maxlength正是对这一属性的典型使用。六、注意 UTF-16 与代理对截断的边界情况本仓库 字符串章节 明确指出JavaScript 字符串内部始终采用 UTF-16 编码与页面编码无关。这一点对truncate有实际影响对绝大多数常用字符BMP 平面内字符length按字符计数slice按字符截取行为符合直觉但对于 emoji 等位于补充平面的字符如它们在 UTF-16 中以**两个码元surrogate pair**表示str.length会计为 2slice也可能在代理对中间截断导致末尾出现无法显示的“半字符”。可以推断如果输入包含这类字符truncate的结果长度虽然仍为maxlength但显示层面可能出现半个 emoji。处理这类场景需要基于codePointAt/String.fromCodePoint字符串章节 有介绍按码点遍历截取。对本章练习而言这不是验收范围但值得在真实项目中留意。另外题目与答案中反复强调的省略号…本身也是一个位于 BMP 内的单字符它在length中计为 1这正是maxlength - 1方案能够成立的编码前提。七、仓库中的延伸与验证路径练习题目原文含完整需求描述与两个验收示例官方答案讲解解题思路的两大要点可运行实现直接执行的最终代码配套测试Mocha 风格的双分支用例字符串章节全文length、slice/substring/substr对比、UTF-16 编码、codePointAt等前置知识。如果希望继续巩固本章技能同一章节内还有ucfirst首字母大写、checkSpam敏感词检测、extractCurrencyValue金额提取等配套练习见 1-js/05-data-types/03-string 目录它们与truncate共同构成了字符串方法的核心实战训练。小结truncate这道题虽小却浓缩了三个 JavaScript 字符串的重要知识点length是属性而非方法、slice是最推荐的自串截取方法、省略号是单个 Unicode 字符…而非三个点。官方实现仅用一行三目表达式就优雅地处理了“截断 预留省略号位置 短串直返”三种诉求配合仓库内的双分支测试用例可作为任何需要文本截断场景的可靠模板。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐GHelper 完整指南1 个 exe 替代奥创性能风扇功耗全调通GHelper 完整指南1 个 exe 替代奥创性能风扇功耗全调通 GHelper 是一款开源免费的华硕笔记本单 exe 控制工具把奥创Armoury桌面应用系统编程JavaScript 变量实战声明、赋值与传递 —— Modern JavaScript Tutorial 练习详解JavaScript 变量实战声明、赋值与传递 —— Modern JavaScript Tutorial 练习详解 本篇指南围绕 Modern JavaSc文档/教程前端终极指南YYText自定义省略号样式让文本截断更优雅终极指南YYText自定义省略号样式让文本截断更优雅 YYText作为iOS平台上功能强大的富文本框架提供了灵活的文本截断功能让开发者可以完全自定义省略号富文本UI组件上一篇如何利用listmonk表单分析工具提升订阅转化率完整指南下一篇使用 Fleet 为 Android 设备添加打印支持部署打印服务应用的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考