JS에서 삼항 연산자의 구문과 일반적인 사용법을 설명하는 기사
- 青灯夜游앞으로
- 2022-10-14 19:31:253618검색
이 기사에서는 JavaScript의 삼항 연산자 구문과 몇 가지 일반적인 용도에 대해 설명합니다.
삼항 연산자(조건 연산자라고도 함)를 사용하면 if...else 문을 사용하는 대신 인라인 조건 검사를 수행할 수 있습니다. 코드를 더 짧고 읽기 쉽게 만듭니다. 조건에 따라 변수에 값을 할당하거나 조건에 따라 표현식을 실행하는 데 사용할 수 있습니다. if...else语句。它使代码更短，更易读。它可用于根据条件为变量赋值，或根据条件执行表达式。
语法
三元运算符接受三个操作数；它是JavaScript中唯一能做到这一点的运算符。您提供一个要测试的条件，后跟一个问号，然后是两个用冒号分隔的表达式。如果条件被认为为真，则执行第一个表达式；如果它被认为是假的，则执行最终的表达式。
它以以下格式使用：
condition ? expr1 : expr2
这里，condition是要测试的条件。如果其值被认为是true，expr1则执行。否则，如果其值被认为是false，expr2则执行。
expr1并且expr2是任何一种表达方式。它们可以是变量、函数调用，甚至是其他条件。
例如：
1 > 2 ? console.log("true") : console.log('false');
使用三元运算符进行赋值
三元运算符最常见的用例之一是决定将哪个值分配给变量。通常，一个变量的值可能取决于另一个变量或条件的值。
虽然这可以使用if...else语句来完成，但它会使代码更长且可读性更低。例如：
const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
message = '数组太长';
} else {
message = '数组太短';
}
console.log(message); // 数组太长
在此代码示例中，您首先定义变量message。然后，您使用该if...else语句来确定变量的值。
这可以使用三元运算符在一行中简单地完成：
const numbers = [1,2,3]; let message = numbers.length > 2 ? '数组太长' : '数组太短'; console.log(message); // 数组太长
使用三元运算符执行表达式
三元运算符可用于执行任何类型的表达式。
例如，如果您想根据变量的值决定运行哪个函数，您可以使用以下if...else语句执行此操作：
if (feedback === "yes") {
sayThankYou();
} else {
saySorry();
}
这可以使用三元运算符在一行中完成：
feedback === "yes" ? sayThankYou() : saySorry();
如果feedback具有 value yes，则将sayThankYou调用并执行该函数。否则，该saySorry函数将被调用并执行。
使用三元运算符进行空检查
在许多情况下，您可能正在处理可能有也可能没有定义值的变量——例如，从用户输入检索结果时，或从服务器检索数据时。
使用三元运算符，您可以通过在条件操作数的位置传递变量名称来检查变量是否存在null。undefined
这在变量是对象时特别有用。如果您尝试访问实际上是nullor的对象上的属性undefined，则会发生错误。首先检查对象是否实际设置可以帮助您避免错误。
例如：
let book = { name: '小明', works: '斗破苍穹' };
console.log(book ? book.name : '张三'); // "小明"
book = null;
console.log(book ? book.name : '张三'); // "张三"
在此代码块的第一部分，book是一个具有两个属性的对象 -name和works在上使用三元运算符时book，它会检查它是否不是nullor undefined。如果不是——意味着它有一个值——name则访问该属性并将输出控制台。否则，如果它为空，张三输出控制台。
因为bookis not null，所以书名会记录在控制台中。但是，在第二部分中，当应用相同的条件时，三元运算符中的条件将失败，因为bookis null。因此，“张三”输出控制台。
嵌套条件
尽管三元运算符是内联使用的，但可以将多个条件用作三元运算符表达式的一部分。您可以嵌套或链接多个条件来执行类似于if...else if...else语句的条件检查。
例如，一个变量的值可能取决于多个条件。它可以使用if...else if...else：
let score = '67';
let grade;
if (score <p>在此代码块中，您测试变量的多个条件<code>score</code>以确定变量的字母等级。</p><p>可以使用三元运算符执行这些相同的条件，如下所示：</p><pre class="brush:php;toolbar:false">let score = '67';
let grade = score <p>评估第一个条件，即<code>score 。如果是<code>true</code>，那么 的<code>grade</code>值为<code>F</code>。如果是<code>false</code>，则计算第二个表达式，即<code>score 。</code></code></p><p>这一直持续到所有条件都为<code>false</code>，这意味着等级的值将为<code>A</code>，或者直到其中一个条件被评估为<code>true</code>并且其真实值被分配给<code>grade</code></p><h2 data-id="heading-0">Syntax🎜</h2>🎜 삼항 연산자는 세 개의 피연산자를 허용합니다. 이는 JavaScript에서 이를 수행할 수 있는 유일한 연산자입니다. 테스트할 조건을 제공하고 그 뒤에 물음표를 입력한 다음 콜론으로 구분된 두 개의 표현식을 제공합니다. 조건이 true로 간주되면 첫 번째 표현식이 실행되고, false로 간주되면 마지막 표현식이 실행됩니다. 🎜🎜다음 형식으로 사용됩니다. 🎜<pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#result {
display: block;
}
button,
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<label for="number">输入一个数字</label>
<input type="number" name="number" id="number" />
</div>
<button>提交</button>
<span id="result"></span>
</body>
<script>
const button = document.querySelector('button');
const numberElm = document.querySelector('#number');
const resultElm = document.querySelector('#result');
button.addEventListener('click', function() {
resultElm.textContent = numberElm.value > 100 ? '太高' : (numberElm.value < 100 ? '太低' : '完美');
});
</script>
</html>🎜여기서 condition은 테스트할 조건입니다. 해당 값이 true로 간주되면 expr1이 실행됩니다. 그렇지 않고 해당 값이 false로 간주되면 expr2가 실행됩니다. 🎜🎜expr1 및 expr2는 임의의 표현식입니다. 변수, 함수 호출 또는 기타 조건이 될 수 있습니다. 🎜🎜예: 🎜rrreee🎜할당에 삼항 연산자 사용🎜
🎜삼항 연산자의 가장 일반적인 사용 사례 중 하나는 할당할 값을 결정하는 것입니다. 변수에 . 종종 한 변수의 값은 다른 변수나 조건의 값에 따라 달라질 수 있습니다. 🎜🎜이 작업은if...else 문을 사용하여 수행할 수 있지만 코드가 길어지고 가독성이 떨어집니다. 예: 🎜rrreee🎜이 코드 예제에서는 먼저 message 변수를 정의합니다. 그런 다음 if...else 문을 사용하여 변수 값을 결정합니다. 🎜🎜이 작업은 삼항 연산자를 사용하여 한 줄로 간단히 수행할 수 있습니다: 🎜rrreee🎜삼항 연산자를 사용하여 표현식을 실행하세요🎜
🎜삼항 연산자를 실행에 사용할 수 있습니다. 어떤 종류의 표현이든. 🎜🎜예를 들어 변수 값에 따라 실행할 함수를 결정하려면 다음if...else 문을 사용하면 됩니다. 🎜rrreee🎜이 작업을 수행할 수 있습니다. 삼항 연산자를 사용하여 한 줄로 완료: 🎜rrreee🎜 feedback의 값이 yes인 경우 sayThankYou가 호출되고 함수가 실행됩니다. . 그렇지 않으면 saySorry 함수가 호출되어 실행됩니다. 🎜🎜null 검사를 위해 삼항 연산자를 사용하세요. 🎜
🎜많은 경우 정의된 값이 있을 수도 있고 없을 수도 있는 변수를 다룰 수도 있습니다. 사용자가 입력하거나 서버에서 데이터를 검색할 때 발생합니다. 🎜🎜삼항 연산자를 사용하면 조건 피연산자 대신 변수 이름을 전달하여 변수가null 존재하는지 확인할 수 있습니다. 정의되지 않음🎜🎜이는 변수가 객체일 때 특히 유용합니다. 실제로 null이거나 정의되지 않음인 개체의 속성에 액세스하려고 하면 오류가 발생합니다. 객체가 실제로 설정되었는지 먼저 확인하면 오류를 방지하는 데 도움이 될 수 있습니다. 🎜🎜예: 🎜rrreee🎜이 코드 블록의 첫 번째 부분에서 book은 두 가지 속성(name 및 works)이 있는 객체입니다. book에 삼항 연산자를 사용할 때 null 또는 undefine이 아닌지 확인합니다. 그렇지 않은 경우(값이 name 있음을 의미함) 속성에 액세스되어 콘솔에 출력됩니다. 그렇지 않고 비어 있으면 张三가 콘솔을 출력합니다. 🎜🎜book이 null이 아니기 때문에 책 제목이 콘솔에 기록됩니다. 그러나 두 번째 부분에서 동일한 조건이 적용되면 book이 null이므로 삼항 연산자의 조건이 실패합니다. 따라서 "Zhang San"은 콘솔을 출력합니다. 🎜🎜중첩 조건 🎜
🎜삼항 연산자가 인라인으로 사용되지만 여러 조건을 삼항 연산자 표현식의 일부로 사용할 수 있습니다. 여러 조건을 중첩하거나 연결하여if...else if...else 문과 유사한 조건 확인을 수행할 수 있습니다. 🎜🎜예를 들어 변수 값은 여러 조건에 따라 달라질 수 있습니다. if...else if...else를 사용하여 수행할 수 있습니다. 🎜rrreee🎜이 코드 블록에서는 변수 score의 여러 조건을 테스트하여 문자를 결정합니다. 가변 등급의. 🎜🎜다음과 같이 삼항 연산자를 사용하여 동일한 조건을 수행할 수 있습니다. 🎜rrreee🎜첫 번째 조건인 score true인 경우 grade 값은 F입니다. false인 경우 score 인 두 번째 표현식이 평가됩니다. 🎜🎜이는 모든 조건이 <code>false로 평가될 때까지 계속됩니다. 즉, 성적 값이 A가 되거나 조건 중 하나가 true로 평가될 때까지 계속됩니다. code> code>이고 그 참값은 등급에 할당됩니다. 🎜示例
在这个实时示例中，您可以测试三元运算符如何在更多条件下工作。 如果您输入的值小于 100，则会显示“太低”消息。如果您输入的值大于 100，则会显示消息“太高”。如果输入 100，将显示“完美”消息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#result {
display: block;
}
button,
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<label for="number">输入一个数字</label>
<input type="number" name="number" id="number" />
</div>
<button>提交</button>
<span id="result"></span>
</body>
<script>
const button = document.querySelector('button');
const numberElm = document.querySelector('#number');
const resultElm = document.querySelector('#result');
button.addEventListener('click', function() {
resultElm.textContent = numberElm.value > 100 ? '太高' : (numberElm.value < 100 ? '太低' : '完美');
});
</script>
</html>
结论
正如本教程中的示例所解释的，JavaScript 中的三元运算符有很多用例。if...else在许多情况下，三元运算符可以通过替换冗长的语句来增加代码的可读性。
【相关推荐：javascript视频教程、编程基础视频】
위 내용은 JS에서 삼항 연산자의 구문과 일반적인 사용법을 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!