Less 字符串函数包括 e()、replace()、str-length()、str-insert()、str-slice()、to-string()，均在编译期运行，仅支持字符串字面量或已解析变量，不支持正则、全局替换或动态模板。
Less 字符串函数有哪些可用的内置函数
Less 提供了 e()、replace()、str-length()、str-insert()、str-slice()、to-string() 这几个直接操作字符串的函数，不支持正则捕获组或动态模板语法（比如没有 format() 或 concat()），这点和 JS 差距明显。
它们全部只能在编译期运行，不能接收变量以外的运行时输入；所有参数必须是字符串字面量或已解析的变量值，不能是未计算的表达式（比如 str-length(@a + @b) 会报错）。
-
e()仅做 HTML 实体转义解除，常用于@import路径拼接或避免 CSS 解析器误判 -
replace()支持简单字符串替换，但只替换第一个匹配项（不支持全局标志g），也不支持正则元字符（如.、d会被当作普通字符） -
str-slice()下标从 1 开始，负数表示倒序，但超出范围不会报错，而是静默返回空字符串
replace() 替换路径或类名时为什么只生效一次
这是最常踩的坑：replace() 默认只替换首次出现的子串。比如你想把 btn-primary 全部替换成 cta-primary，写成 replace("btn-primary btn-secondary btn-primary", "btn", "cta") 结果是 "cta-primary btn-secondary btn-primary" —— 后两个没变。
解决方法只有手动链式调用，或者借助循环 mixin 模拟（但 Less 本身无原生 for 循环，需用递归 mixin + guard）：
立即学习“前端免费学习笔记（深入）”；
.replace-all(@str, @from, @to, @result: "") when (str-length(@str) > 0) {
@next: replace(@str, @from, @to, 1);
@rest: str-slice(@str, str-index(@str, @from) + str-length(@from));
.replace-all(@rest, @from, @to, @result + @next);
}
.replace-all(@str, @from, @to, @result) when (str-length(@str) = 0) {
@replaced: @result;
}
注意：这个递归方案在较长字符串下可能触发 Less 编译栈溢出（默认限制约 20 层），生产环境慎用。
e() 解包字符串时遇到斜杠或引号报错怎么办
e() 的作用是“移除引号并转义 HTML 实体”，但它对反斜杠 和双引号 " 处理很敏感。例如 e("url("/img/icon.svg")") 会因内部双引号未被 Less 字符串解析器识别而报错 ParseError: Unrecognised input。
正确做法是统一用单引号包裹外层，并确保内部不出现未转义的同类型引号：
- ✅
e('url("/img/icon.svg")') - ✅
e("url('/img/icon.svg')") - ❌
e("url("/img/icon.svg")")（外双引号 + 内双引号，解析失败） - ❌
e("url(\"/img/icon.svg\")")（Less 不支持"转义，会当字面量处理）
如果路径来自变量，优先用插值 ~"url('@{path}')" 更稳妥，e() 仅用于需要解引号又含 HTML 实体的特殊场景（如 e("<div>") → <code><div>）。
<h3>str-slice 和 str-index 在拼接类名时容易越界</h3>
<p>Less 字符串下标从 1 开始，且 <code>str-index("abc", "d") 返回 0（不是 false 或 null），这意味着你不能直接用 if(str-index(...) > 0) 做存在性判断——它永远成立（除非返回 0，但 0 > 0 是 false）。
更安全的写法是显式比对：
.has-substring(@str, @substr) when (str-index(@str, @substr) > 0) {
@found: true;
}
.has-substring(@str, @substr) when (str-index(@str, @substr) = 0) {
@found: false;
}
另外，str-slice("abc", 5, 10) 不会报错，但返回空字符串，这可能导致后续拼接出不可见的空类名（比如 .btn-@{suffix} 中 @suffix 是空的，结果变成 .btn-），CSS 无效且难以调试。
复杂字符串处理逻辑建议移到构建层（如 PostCSS 插件），Less 仅保留简单拼接和条件分支。
