首页 > 网络编程 > JavaScript > javascript技巧 > js ! 和 !!区别与作用

javascript中! 和 !! 的区别与作用示例详解

2025-06-10 10:00:27 作者：YD_1989

JavaScript中!取反布尔值,!!强制转换为布尔值,!用于条件判断取反,!!用于类型转换,这篇文章主要介绍了javascript中! 和 !! 区别与作用的相关资料,需要的朋友可以参考下

在 JavaScript 里，! 和 !! 是两种不同的逻辑运算符，它们的功能和使用场景有明显区别。

1、 !（逻辑非运算符）

它的主要作用是对操作数进行布尔值取反。具体来说，就是先把操作数转换为布尔值，然后取其相反的值。

代码示例：

console.log(!true);     // false
console.log(!false);    // true

// 对于非布尔值，会先将其转换为布尔值再取反
console.log(!0);        // true（因为 0 转换为布尔值是 false）
console.log(!'');       // true（空字符串转换为布尔值是 false）
console.log(!null);     // true
console.log(!undefined);// true
console.log(!NaN);      // true

console.log(!5);        // false（因为 5 转换为布尔值是 true）
console.log(!'hello');  // false（非空字符串转换为布尔值是 true）
console.log(![]);       // false（空数组是对象，转换为布尔值是 true）
console.log(!{});       // false（空对象转换为布尔值是 true）

2、!!（双重逻辑非运算符）

它其实就是连续使用两次 ! 运算符。先通过第一个 ! 对操作数取反，再用第二个 ! 对取反后的结果再次取反，最终得到的是操作数对应的布尔值。

console.log(!!true);    // true
console.log(!!false);   // false

// 对于非布尔值，会将其转换为对应的布尔值
console.log(!!0);       // false
console.log(!!'');      // false
console.log(!!null);    // false
console.log(!!undefined);// false
console.log(!!NaN);     // false

console.log(!!5);       // true
console.log(!!'hello'); // true
console.log(!![]);      // true
console.log(!!{});      // true

3、核心区别

!：能将任何值转换为布尔值，并且结果与该值本身的布尔值相反。
!!：同样可以把任何值转换为布尔值，但结果和该值本身的布尔值相同。其本质和 Boolean() 函数的作用一样。

4、使用场景

!：用于条件判断中取反

const value = null;
if (!value) {
    console.log('值为假值（false）');
}

!!：用于将一个值强制转换为布尔类型，在需要布尔值的场景中经常会用到。

const value = 'hello';
const isTruthy = !!value; // true
console.log(`值是否为真值：${isTruthy}`);

5、在 vue 项目中的使用

（1）!（逻辑非运算符）在 vue 中的使用

模板中的条件判断

在模板里进行条件渲染时，! 可以对数据进行取反操作。

<template>
  <div>
    <!-- 如果 isLoading 为 false，则显示内容 -->
    <div v-if="!isLoading">内容已加载</div>
    
    <!-- 如果 user 为空，则显示提示 -->
    <div v-if="!user">请先登录</div>
  </div>
</template>

计算属性中返回取反结果

在计算属性里，! 能够返回取反后的布尔值。

<template>
  <div>
    <button :disabled="isDisabled">提交</button>
  </div>
</template>

<script>
export default {
  computed: {
    isDisabled() {
      // 当表单无效时禁用按钮
      return !this.formIsValid;
    }
  }
}
</script>

（2）!!（双重逻辑非运算符）

强制转换为布尔值

在模板表达式或者计算属性中，!! 能把值强制转换为布尔值，这在需要布尔值的场景中很有用。

<template>
  <div>
    <!-- 将 message 转换为布尔值，判断是否显示消息提示 -->
    <Alert v-if="!!message" :type="messageType">{{ message }}</Alert>
    
    <!-- 显示数据是否存在的状态 -->
    <span>{{ !!user ? '已登录' : '未登录' }}</span>
  </div>
</template>

监听事件时处理参数

在监听事件并处理参数时，!! 可将参数转换为布尔值。

<template>
  <div>
    <input type="checkbox" @change="handleChange">
  </div>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      // 将事件的选中状态转换为布尔值
      const isChecked = !!event.target.checked;
      this.updateStatus(isChecked);
    }
  }
}
</script>

（3）Vue 特有的注意事项

在 v-bind 中使用

在使用 v-bind 绑定布尔属性时，!! 可以确保传入的值是布尔类型。

<template>
  <div>
    <!-- 确保 loading 是布尔值 -->
    <Spinner :loading="!!loadingState" />
  </div>
</template>

（4）对比示例

<template>
  <div class="user-profile">
    <!-- 使用 ! 进行条件判断 -->
    <div v-if="!user">
      <button @click="login">登录</button>
    </div>
    
    <!-- 使用 !! 强制转换为布尔值 -->
    <div v-if="!!user">
      <img :src="user.avatar" alt="用户头像">
      <h3>{{ user.name }}</h3>
      
      <!-- 在计算属性中使用 ! -->
      <button :disabled="!canEdit">编辑资料</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null, // 假设这是从 API 获取的用户数据
      canEdit: true
    }
  },
  methods: {
    login() {
      // 登录逻辑...
    }
  },
  computed: {
    // 使用 !! 将值转换为布尔值
    hasAvatar() {
      return !!this.user?.avatar;
    }
  }
}
</script>

6、总结

! 是取反操作，得到的结果是布尔值，且与原值的布尔值相反。
!! 是强制类型转换，得到的结果也是布尔值，和原值的布尔值相同。

到此这篇关于javascript中! 和 !! 的区别与作用示例详解的文章就介绍到这了,更多相关js ! 和 !!区别与作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！