制作网站制作公司网址百度刷排名
JavaScript 的三元表达式（也称为条件运算符）是一种简洁的语法，用于根据一个条件表达式的真假来返回不同的值。其基本语法如下：
condition ? exprIfTrue : exprIfFalse;
condition是要判断的条件表达式。exprIfTrue是当条件为真时要执行的表达式。exprIfFalse是当条件为假时要执行的表达式。
用法示例
1、基本用法
const age = 18;
const canVote = age >= 18 ? '可以投票' : '不可以投票';
console.log(canVote); // 输出: 可以投票
2、嵌套使用
你可以嵌套使用多个三元表达式，虽然可读性可能会降低。
const score = 85;
const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'D';
console.log(grade); // 输出: B
3、在函数中使用
三元表达式可以在函数中使用，以根据参数返回不同的结果。
function getStatus(isActive) {return isActive ? 'Active' : 'Inactive';
}console.log(getStatus(true)); // 输出: Active
console.log(getStatus(false)); // 输出: Inactive
4、在 JSX 或模板中使用
三元表达式也常用于 React 的 JSX 或 Vue 的模板中，以动态渲染内容。
// 在 React 中
const isLoggedIn = true;
return (<div>{isLoggedIn ? <p>欢迎回来！</p> : <p>请登录</p>}</div>
);
<!-- 在 Vue 中 -->
<template><div><p>{{ isLoggedIn ? '欢迎回来！' : '请登录' }}</p></div>
</template>
5、作为函数参数
三元表达式可以直接作为函数参数传递。
function greet(name) {return name ? `Hello, ${name}!` : 'Hello, guest!';
}console.log(greet('Alice')); // 输出: Hello, Alice!
console.log(greet('')); // 输出: Hello, guest!
注意事项
- 可读性：虽然三元表达式可以使代码更简洁，但过多的嵌套会使代码变得难以阅读。在复杂的条件判断中，使用
if...else语句可能会更清晰。 - 短路求值：三元运算符的评估是在一个表达式的上下文中进行的。它可以在某些情况下帮助优化代码，但要小心评估复杂的表达式。