<p>An in-depth exploration of JavaScript operators: from arithmetic operators to ternary operators</p> <p>This article will take an in-depth look at JavaScript operators. </p> <p>JavaScript operators include: </p> <ol> <li>Arithmetic operators: <code> </code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>**</code> </li> <li> Negation operator: <code>-</code> (unary negative sign), <code>!</code> (logical not) </li> <li>Comparison operators: <code>></code>, <code><</code>, <code>>=</code>, <code><=</code>, <code>==</code>, <code>!=</code>, <code>===</code>, <code>!==</code></li> <li> Logical operators: <code>&&</code> (AND), <code>||</code> (OR), <code>!</code> (not) </li> <li>Null value coalescing operator: <code>??</code></li> <li>Ternary operator: <code>? :</code></li> </ol> <p><strong>True and false values:</strong></p> <p>False values: 0, "" (empty string), <code>false</code>, <code>null</code>, <code>undefined</code>, and <code>NaN</code> True value: all other values ??</p> <p><strong>Operations:</strong></p> <p>The value or variable that the operator acts on. For example, in the expression <code>5 2</code>, the numbers 5 and 2 are the operands. </p> <p><strong>Unary operator:</strong></p> When the <p> operator acts on a single operand, it is called a unary operator. For example: <code> 5</code>, <code>-x</code> (negates x), or <code>typeof "123"</code>. </p> <p><strong>Binary operator:</strong></p> When the <p> operator acts on two operands, it is called a binary operator. For example: <code>5 2</code>, <code>x * y</code>. </p> <p><strong>Arithmetic operators:</strong> <code> </code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>**</code></p> <p>JavaScript will implicitly convert types during operations. For example: </p> <p><code>5 - "3"</code> The result is the integer 2 ("3" is converted to the integer 3 for subtraction) <code>10 % "3"</code> The result is an integer 1</p> <p><strong><code> </code> Special behavior of operator: </strong></p> <p>For strings, the <code> </code> operator will concatenate them. For example: </p> <p><code>let value = "hello" "world" "!";</code> // "helloworld!"</p> <p>This behavior is different from other arithmetic operators. If either operand is of type string, the <code> </code> operator concatenates the operands. For example: </p> <p><code>"10" 4</code> The result is the string "104". <code>1 1 "5"</code> The result is the string "25" (counted from left to right). </p> <p><strong>One dollar <code> </code>:</strong></p> <p>The unary <code> </code> operator converts non-numbers to numbers. It is short for <code>Number()</code>. For example: </p> <p><code> "123"</code> // 123 <code> true</code> // 1 <code> ""</code> // 0</p> <p><strong> Negation operator: </strong></p> <p>The unary <code>-</code> operator negates a number or variable, effectively flipping its sign. For example: </p> <p><code>let x = 3;</code> <code>console.log(-x);</code> // -3</p> <p><strong>Comparison operator:</strong></p><p> Comparison operators compare numbers, which is the same as what we know from mathematics. For string, JavaScript is compared based on the order of letters or phrases. You can refer to the character code table (ASCII or Unicode). When performing comparison, JavaScript will convert the value to numbers as needed. For example: </p> <p> </> // true <code>"2" > 1</code> JavaScript has some characteristics in its comparative behavior: <p> </p> > // true <p> // false <code>null == undefined</code> // false (nan is defined as "not equal to any value, including itself") <code>null === undefined</code> <code>NaN == NaN</code> Logical operator: </p> <p> <strong> </strong> (and) </p> <p> <strong> The operator returns <code>&&</code> only when both operations are the real values. </strong> </p> > // true <p> // false <code>&&</code> // false <code>true</code> // false </p> <p> JavaScript calculates the value from left to right. If the number of left operation is the real value, continue to calculate the number of right operations and return the right value. <code>true && true</code> <code>true && false</code> // 2 <code>false && true</code> // 3 <code>false && false</code> If the fake value is encountered, stop and return the fake value. </p> <p> > // null </p> // undefined <p> <code>1 && 2</code> If all the operations are true value, return the last value. <code>1 && true && 3</code> </p> // 3 <p> </p> <p> (or) <code>1 && null</code> <code>1 && 2 && undefined</code> </p> If the number of operators is the real value, it returns <p>. </p> <p> > // true <code>1 && 2 && 3</code> // true </p> // true <p> // false <strong> <code>||</code> JavaScript calculates the value from left to right. It returns the first true value it encountered. </strong> </p> > // 1 <p> // 2 <code>||</code> If the number of operations is true, the last value is returned. <code>true</code> </p> // 0 <p> <code>true || true</code> <code>true || false</code> (Non) <code>false || true</code> <code>false || false</code> </p> Bur value of the number of operators in the operation character. It converts the number of operations to the Boolean value (<p> or </p>), and then returns the opposite value. <p> <code>null || 1</code> > // false <code>undefined || 0 || 2 || 5</code> // true </p> <p> </p> <p> The air value merging operator: <code>null || undefined || 0</code> </p> <p> <strong> The empty value combined computing character <code>!</code> is a newer operator (ES2020). It helps to deal with whether the check value is </strong> or </p> and return the default value. <p> <code>!</code> grammar: <code>true</code> <code>false</code> If is not </p> or <p>, then <code>!true</code>. If <code>!0</code> is or <code>if (!true) {</code>, then <code>console.log("This won't run.");</code>. <code>}</code></p> <p> This operator is useful because it handles specifically <code>null</code> or <code>undefined</code> and is not affected by false values ??such as <code>0</code>, <code>""</code> or <code>false</code>, whereas the <code>||</code> (or) operator Treats them as false and replaces them with the second value. </p> <p><code>let height = 0;</code> <code>alert(height || 100); // 100 (因?yàn)?0 是假值)</code> <code>alert(height ?? 100); // 0 (因?yàn)?0 不是 null 或 undefined)</code></p> <p><code>||</code> Returns the first true value <code>??</code> Returns the first defined value </p> <p><strong>Ternary operator: <code>? :</code></strong></p> <p>Syntax: <code>let result = condition ? value1 : value2;</code></p> <p>The condition is evaluated. If true, returns <code>value1</code>; otherwise, returns <code>value2</code>. </p> <p>The ternary operator is concise and clear, and is usually used for simple conditional assignment. For example: </p> <p><code>const className = isActive ? "red" : "blue";</code></p> <p>However, it is not recommended to use the ternary operator to execute different blocks of code (such as <code>if</code> statements). This results in less readable code. </p> The <p><code>||</code> and <code>??</code> operators sometimes appear to produce similar results, but they cannot be used interchangeably. The <code>&&</code> operator returns the first false value it encounters, while the <code>??</code> returns the second value only if the first value is <code>null</code> or <code>undefined</code>. Depending on the behavior you want to achieve, it's important to carefully consider which operator to use. </p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173777947349716.jpg" class="lazy" alt="Understanding JavaScript Operators: From Arithmetic to Ternary"></p> </li> </ol>

The above is the detailed content of Understanding JavaScript Operators: From Arithmetic to Ternary. For more information, please follow other related articles on the PHP Chinese website!