Maison > Article > interface Web > Un article expliquant la syntaxe et l'utilisation courante de l'opérateur ternaire en JS

Un article expliquant la syntaxe et l'utilisation courante de l'opérateur ternaire en JS

青灯夜游avant: 2022-10-14 19:31:253533parcourir

Cet article discutera de la syntaxe de l'opérateur ternaire en JavaScript et de quelques utilisations courantes. J'espère qu'il vous sera utile ! L'

opérateur ternaire (également connu sous le nom d'opérateur conditionnel) peut être utilisé pour effectuer des vérifications conditionnelles en ligne au lieu d'utiliser une instruction if...else. Cela rend le code plus court et plus lisible. Il peut être utilisé pour attribuer une valeur à une variable en fonction d'une condition ou pour exécuter une expression en fonction d'une condition. 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">Syntaxe🎜</h2>🎜L'opérateur ternaire accepte trois opérandes ; c'est le seul opérateur en JavaScript qui peut faire cela. Vous fournissez une condition à tester, suivie d'un point d'interrogation, puis de deux expressions séparées par des deux-points. Si la condition est considérée comme vraie, la première expression est exécutée ; si elle est considérée comme fausse, l'expression finale est exécutée. 🎜🎜Il s'utilise au format suivant : 🎜<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(&#39;button&#39;);
		const numberElm = document.querySelector(&#39;#number&#39;);
		const resultElm = document.querySelector(&#39;#result&#39;);
	
		button.addEventListener(&#39;click&#39;, function() {
			resultElm.textContent = numberElm.value > 100 ? &#39;太高&#39; : (numberElm.value < 100 ? &#39;太低&#39; : &#39;完美&#39;);
		});
	</script>
</html>

🎜Ici, condition est la condition à tester. Si sa valeur est considérée comme true, expr1 est exécuté. Sinon, si sa valeur est considérée comme false, expr2 est exécuté. 🎜🎜expr1 et expr2 sont des expressions. Il peut s'agir de variables, d'appels de fonction ou même d'autres conditions. 🎜🎜Par exemple : 🎜rrreee

🎜Utilisez l'opérateur ternaire pour l'affectation🎜

🎜L'un des cas d'utilisation les plus courants de l'opérateur ternaire consiste à décider à quelle valeur attribuer une variable. Souvent, la valeur d’une variable peut dépendre de la valeur d’une autre variable ou condition. 🎜🎜Bien que cela puisse être fait en utilisant les instructions if...else, cela rendra le code plus long et moins lisible. Par exemple : 🎜rrreee🎜Dans cet exemple de code, vous définissez d'abord la variable message. Vous utilisez ensuite l'instruction if...else pour déterminer la valeur de la variable. 🎜🎜Cela peut être fait simplement en une seule ligne en utilisant l'opérateur ternaire : 🎜rrreee

🎜Exécuter l'expression en utilisant l'opérateur ternaire🎜

🎜L'opérateur ternaire est disponible pour l'exécution tout type d'expression. 🎜🎜Par exemple, si vous souhaitez décider quelle fonction exécuter en fonction de la valeur d'une variable, vous pouvez le faire en utilisant l'instruction if...else suivante : 🎜rrreee🎜Cela peut être fait en une ligne en utilisant l'opérateur ternaire Terminé : 🎜rrreee🎜Si feedback a la valeur oui, alors sayThankYou sera appelé et la fonction sera exécutée . Sinon, la fonction saySorry sera appelée et exécutée. 🎜

🎜Utilisez l'opérateur ternaire pour la vérification des valeurs nulles 🎜

🎜Dans de nombreux cas, vous pouvez avoir affaire à des variables qui peuvent ou non avoir une valeur définie - par ex. sont saisis par l'utilisateur ou lorsque les données sont récupérées du serveur. 🎜🎜À l'aide de l'opérateur ternaire, vous pouvez vérifier si une variable existe null en passant le nom de la variable à la place de l'opérande conditionnel. non défini🎜🎜Ceci est particulièrement utile lorsque la variable est un objet. Une erreur se produit si vous essayez d'accéder à une propriété sur un objet qui est en réalité null ou non défini. Vérifier en premier que l'objet est réellement défini peut vous aider à éviter les erreurs. 🎜🎜Par exemple : 🎜rrreee🎜Dans la première partie de ce bloc de code, book est un objet avec deux propriétés - name et works in Lors de l'utilisation de l'opérateur ternaire sur book, il vérifie s'il n'est pas null ou undefined. Si ce n'est pas le cas - ce qui signifie qu'elle a une valeur - name alors la propriété est accessible et affichée sur la console. Sinon, s'il est vide, 张三 affiche la console. 🎜🎜Comme bookn'est pas null, le titre du livre sera enregistré dans la console. Cependant, dans la deuxième partie, lorsque la même condition est appliquée, la condition dans l'opérateur ternaire échoue car book est null. Par conséquent, "Zhang San" sort la console. 🎜

🎜Conditions imbriquées 🎜

🎜Bien que l'opérateur ternaire soit utilisé en ligne, plusieurs conditions peuvent être utilisées dans le cadre d'une expression d'opérateur ternaire. Vous pouvez imbriquer ou enchaîner plusieurs conditions pour effectuer des vérifications de condition similaires aux instructions if...else if...else. 🎜🎜Par exemple, la valeur d'une variable peut dépendre de plusieurs conditions. Cela peut être fait en utilisant if...else if...else : 🎜rrreee🎜Dans ce bloc de code, vous testez plusieurs conditions de la variable score pour déterminer la lettre de la note variable. 🎜🎜Ces mêmes conditions peuvent être exécutées à l'aide de l'opérateur ternaire comme suit : 🎜rrreee🎜Évalue la première condition, qui est score . Si <code>true, alors la valeur grade est F. Si false, la deuxième expression est évaluée, qui est score false, ce qui signifie que la valeur de la note sera A, ou jusqu'à ce que l'une des conditions soit évaluée à true code> code> et sa vraie valeur est attribuée à <code>grade. 🎜

示例

在这个实时示例中，您可以测试三元运算符如何在更多条件下工作。如果您输入的值小于 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(&#39;button&#39;);
		const numberElm = document.querySelector(&#39;#number&#39;);
		const resultElm = document.querySelector(&#39;#result&#39;);
	
		button.addEventListener(&#39;click&#39;, function() {
			resultElm.textContent = numberElm.value > 100 ? &#39;太高&#39; : (numberElm.value < 100 ? &#39;太低&#39; : &#39;完美&#39;);
		});
	</script>
</html>

Un article expliquant la syntaxe et lutilisation courante de lopérateur ternaire en JS

结论

正如本教程中的示例所解释的，JavaScript 中的三元运算符有很多用例。if...else在许多情况下，三元运算符可以通过替换冗长的语句来增加代码的可读性。

【相关推荐：javascript视频教程、编程基础视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu’est-ce que Webpack ? Explication détaillée de son fonctionnement ?Article suivant：Qu’est-ce que Webpack ? Explication détaillée de son fonctionnement ?

Articles Liés

Voir plus