vue中如何删除字符串中的空格符

 更新时间:2024年01月01日 09:45:53   作者:xuelong-ming  
这篇文章主要介绍了vue中如何删除字符串中的空格符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue删除字符串中的空格符

问题

在使用过程中发现字符串中重置着空格,使用.trim()方法无法删除空格

var str = '123456     '
console.log(str.length); // 11

原因

使用断点可以看到字符串中的是空格字符,并不是单纯的空格

var str = '123456\u0000\u0000\u0000\u0000\u0000'

解决方法

使用正则表达式删除空字符

var str = '123456\u0000\u0000\u0000\u0000\u0000'
console.log(str.length) // 11
console.log(str.replace('\0', '').length) // 10
console.log(str..replace(/\0/g, '').length) // 6

vue中的空格使用

  == 普通的英文半角空格

  ==   ==   == no-break space (普通的英文半角空格但不换行)

  == 中文全角空格 (一个中文宽度)

  ==   == en空格 (半个中文宽度)

  ==   == em空格 (一个中文宽度)

  == 四分之一em空格 (四分之一中文宽度)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中EpicEditor和vue-quill-editor的使用详解

    Vue中EpicEditor和vue-quill-editor的使用详解

    EpicEditor和Vue-quill-editor都是基于Quill.js的富文本编辑器,并且都提供了许多强大的功能,下面我们就来介绍一下二者的具体使用,感兴趣的小伙伴可以了解一下
    2023-11-11
  • vue.js使用v-model实现父子组件间的双向通信示例

    vue.js使用v-model实现父子组件间的双向通信示例

    这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下
    2020-02-02
  • vue3界面使用router及使用watch监听router的改变

    vue3界面使用router及使用watch监听router的改变

    vue2中使用router非常简单,但是vue3中略微有些改变,通过本文讲解下他的改变,对vue3 watch监听router相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • vue cli3 实现分环境打包的步骤

    vue cli3 实现分环境打包的步骤

    这篇文章主要介绍了vue cli3 实现分环境打包的步骤,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • Vue系列之Element UI表单自定义校验规则

    Vue系列之Element UI表单自定义校验规则

    表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作而占用服务器资源,这篇文章主要给大家介绍了关于Vue系列之Element UI表单自定义校验规则的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue 封装防刷新考试倒计时组件的实现

    Vue 封装防刷新考试倒计时组件的实现

    这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue+Router+Element实现简易导航栏

    Vue+Router+Element实现简易导航栏

    这篇文章主要为大家详细介绍了Vue+Router+Element实现简易导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于Vue实现一个"蛇形"步骤条

    基于Vue实现一个"蛇形"步骤条

    在现代Web应用中,步骤条作为一种常见的UI组件,广泛应用于表单提交、任务进度以及多步骤操作等场景,下面我们来看看如何利用Vue实现一个蛇形步骤条吧
    2024-11-11
  • 如何使用yarn创建vite+vue3&&electron多端运行

    如何使用yarn创建vite+vue3&&electron多端运行

    这篇文章主要介绍了如何使用yarn创建vite+vue3&&electron多端运行,本文分步骤给大家介绍的非常详细,包括使用yarn创建vite+vue3项目会遇到哪些问题,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue应用国际化(i18n)的核心方案与实践技巧

    Vue应用国际化(i18n)的核心方案与实践技巧

    国际化(Internationalization,简称i18n)是现代Web应用开发中不可或缺的重要功能,本文将深入探讨Vue生态中最流行的国际化解决方案,从原理到实践,带你全面掌握Vue应用的国际化实现,需要的朋友可以参考下
    2026-01-01

最新评论