JS判断字符串是否全为空的两种方式

 更新时间:2023年10月26日 11:18:29   作者:加油乐  
当我们需要判断用户输入的是否全是空格,或用户在不输入内容的情况下使用回车发送,此时我们如果需求内容不能为空,常规判断无法识别,空格本身也有length,这个时候就可使用到下列两种方式

一、使用场景

当我们需要判断用户输入的是否全是空格,或用户在不输入内容的情况下使用回车发送。此时我们如果需求内容不能为空,常规判断无法识别,空格本身也有length,这个时候就可使用到下列两种方式。

二、方法示例

1、使用trim()方法

  • trim()方法会去除首尾空格,并返回一个处理后的新值
  • 主要内容为js部分,回车同理,本次不做演示
<template>
  <div class="box">content</div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps, } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const store = useStore()
const data = reactive({
  str: '        '
})
// 是否不存在
console.log(!data.str); // false
// 长度
console.log(data.str.length);//8  
// 是否不存在
console.log(!data.str.trim()); //true
// 长度
console.log(data.str.trim().length); //0
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>

三、使用正则验证

  • 通过匹配是否全空,决定是否要进行其他逻辑
<template>
  <div class="box">content</div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps, } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const store = useStore()
const data = reactive({
  str: '     '
})
let reg = new RegExp(/^[ ]*$/)
// 验证为全空,即无值
console.log(reg.test(data.str));//true
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>

到此这篇关于JS判断字符串是否全为空的两种方式的文章就介绍到这了,更多相关JS判断字符串是否全为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现控制文件拖拽并获取拖拽内容功能

    js实现控制文件拖拽并获取拖拽内容功能

    本片文章主要给大家分享了用JS写出控制文件拖拽并获取拖拽内容功能实现过程,以及代码分享,有兴趣的一起学习下。
    2018-02-02
  • 微信公众号-获取用户信息(网页授权获取)实现步骤

    微信公众号-获取用户信息(网页授权获取)实现步骤

    这篇文章主要介绍了微信公众号-获取用户信息(网页授权获取)实现步骤的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript创建对象的七种经典方式分享

    JavaScript创建对象的七种经典方式分享

    JavaScript 创建对象的方式有很多,通过 Object 构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。本文介绍了七种非常经典的创建对象的方式,希望对大家有所帮助
    2022-11-11
  • JavaScript设计模式经典之工厂模式

    JavaScript设计模式经典之工厂模式

    工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式,感兴趣的朋友一起学习吧
    2016-02-02
  • 微信小程序实现美食展示与收藏功能

    微信小程序实现美食展示与收藏功能

    这篇文章主要介绍了如何在微信小程序中实现美食展示与收藏的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起动手尝试一下
    2022-03-03
  • 解决layui富文本编辑器图片上传无法回显的问题

    解决layui富文本编辑器图片上传无法回显的问题

    今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现简单随机抽奖的方法

    js实现简单随机抽奖的方法

    这篇文章主要介绍了js实现简单随机抽奖的方法,涉及字符串的操作、setInterval定时调用等技巧,需要的朋友可以参考下
    2015-01-01
  • JS跳转手机站url的若干注意事项

    JS跳转手机站url的若干注意事项

    去年年底开发了一个手机站平台,遇到了很多坎,今天小编给大家分享下使用JS跳转手机站url的若干注意事项,需要的朋友参考下吧
    2017-10-10
  • js 输入框 正则表达式(菜鸟必看教程)

    js 输入框 正则表达式(菜鸟必看教程)

    下面小编就为大家带来一篇js输入框使用正则表达式校验输入内容的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • javascript实现树形菜单的方法

    javascript实现树形菜单的方法

    这篇文章主要介绍了javascript实现树形菜单的方法,涉及javascript动态操作页面元素与节点属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论