JS前端之三元表达式解析

最新推荐文章于 2025-04-01 09:36:54 发布

像八戒的程序猴

最新推荐文章于 2025-04-01 09:36:54 发布

阅读量7.1k

点赞数 1

分类专栏：前端基础知识文章标签：前端 javascript ES6 前端框架

本文链接：https://blog.youkuaiyun.com/weixin_42024074/article/details/121955076

版权

前端基础知识专栏收录该内容

7 篇文章

订阅专栏

本文介绍了JavaScript中的三元表达式，它是一种简洁的条件分支语句。讲解了其语法，包括简单式和详解式，并阐述了其优点，如在进行二选一赋值时提供更紧凑的代码结构。此外，还提供了简单的使用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三元表达式

又叫三元运算符，必须有三个操作数参与的运算
操作符号：? 与:
表达式：在参与 js 程序时，都必须先计算出表达式结果，才能参与后续程序
由于三元表达式具备了一些选择的效果，所以也是一种条件分支语句

语法

简单式：

<script>  
       var a = 1;
	   var b = 2;
	   var c = b > a  ? ('99_true') : ('88_false');
		console.log(c); // 99_true 
	   var d = a > b  ? ('99_true') : ('88_false');
		console.log(d); // 88_false
</script>

简单来说就是b>a是对还是错，对即为真，错即为假，对就取冒号：前面的值99_true，错就取冒号：后面的值88_false。

详解式：

boolean_expression ? true_value : false_value;
boolean_expression: 布尔表达式，表达式在参与三元运算中必须求得一个布尔类型的值，要么是 true，要么是 false，结果作为判断依据，判断到底去：前面的值还是后面的值
true_value：布尔表达式的值为真时，三元表达式的结果
false_value：布尔表达式的值为假时，三元表达式的结果
作用：根据布尔表达式的结果，如果为真，三元表达式结果就是真值，如果为假，三元表达式结果就是假值

<script>  
    console.log(true ? 1 : 0); // 1
    console.log(false ? 1 : 0); // 0
    // 相当于 if 语句中的
    var a = true;
    if (a){
        console.log(1);
    } else {
        console.log(0);
    } // 1
</script>

优点

虽然 if 语句可以模拟三元表达式，但是三元表达式有自己的优点：二选一的情况下，三元表达式结构更加简单
三元表达式作为一个表达式参与程序时必须运算出结果才能参与，可以利用这个特点，将二选一结果赋值给一个变量
遇到给一个变量根据条件二选一赋值的情况，可以使用三元表达式

简单案例使用

<script>  
            var aa = '';
			var bb = '';
			var age = prompt("Input your age:");
			age > 18 ? (aa = '成年人', bb = '18岁以上') : (aa = '未成年人', bb = '18岁以下');
			alert(aa + ',' + bb);
</script>