直接用原生 trim() 即可,它在 uni-app 所有平台均原生支持,简洁可靠;uView 的 uni.$u.trim() 支持 left/right/both/all 模式,但需注意 all 会误删全角空格;避免在 input 中实时 trim 导致光标跳动,应在提交前统一处理。

直接用 trim 就够了,别自己写正则
uni-app 项目里,String.prototype.trim() 在所有目标平台(H5、微信小程序、App)都原生支持,不需要 polyfill。自己手写正则如 s.replace(/(^\s*)|(\s*$)/g, '') 完全没必要,还容易漏掉全角空格、NBSP 等 Unicode 空白字符。
实操建议:
- 优先调用原生
value.trim(),简洁、可靠、语义明确 - 如果需要兼容极老 Android WebView(已基本绝迹),再考虑 uView 的
uni.$u.trim() - 避免在表单提交前反复调用
trim()—— 应该只在数据落地前做一次,不是每次input输入都 trim
uni.$u.trim() 的 pos 参数怎么用
如果你用了 uView 框架,uni.$u.trim(str, pos) 提供了更细粒度控制,但要注意 pos 是字符串,不是布尔值,且大小写敏感。
常见用法:
-
uni.$u.trim(' abc ', 'both')→'abc'(默认行为,可省略第二个参数) -
uni.$u.trim(' abc ', 'left')→'abc ' -
uni.$u.trim(' abc ', 'right')→' abc' -
uni.$u.trim('a b c', 'all')→'abc'(真正删掉所有空白,包括中间)
注意:'all' 会干掉所有 Unicode 空白字符(如 \u2000–\u200F),但也会误杀中文全角空格(\u3000)——若业务需保留中文标点间的空格,别用 'all'。
过滤器里用 trim 要小心响应式失效
在 Vue 过滤器中直接返回 value.trim() 没问题,但如果你在过滤器里修改了原始数据(比如赋值给 this.xxx),就可能破坏响应式链路。
正确做法:
- 过滤器函数必须是纯函数:只接收输入,只返回处理后字符串,不改参、不改 this
- 不要在过滤器里调用
this.setData或this.$set—— 这是模板层的事,不该混进来 - 如果要在提交前统一 trim,应在
onSubmit里集中处理,而不是靠过滤器“偷偷”改值
input 实时 trim 容易引发光标跳动
有人喜欢在 @input 里实时执行 this.value = this.value.trim(),这会导致移动端光标频繁重置、输入体验卡顿,尤其在 iOS 微信里明显。
更稳妥的做法:
- 保留用户原始输入,仅在提交或校验时 trim
- 若必须视觉上“看起来没空格”,可用
uni-easyinput的clearable+ 提示文案引导,而非强制抹除 - 真要实时处理,改用
@blur触发一次 trim,既保持体验,又确保最终值干净
真正麻烦的不是怎么 trim,而是 trim 后要不要同步更新视图、在哪一环做、会不会影响 v-model 绑定 —— 这些边界比函数本身更值得盯紧。


















