很多新手学JS，栽在运算符优先级、三元运算符、模板字符串表达式上，今天用大白话把算术运算符、赋值运算符、比较运算符、逻辑运算符、一元运算符、二元运算符、三元运算符、运算符优先级、模板字符串表达式，一次性讲通透，看完直接上手写代码！

一、先搞懂：什么是表达式？

在JS里，表达式就是“会计算出一个结果”的代码片段，简单说：能得出一个值的代码，就是表达式。

它可以是：

• 一个数字：100
• 一个变量：num
• 一个运算：a + b
• 一个函数调用：fn()
• 甚至一行判断：age > 18

核心特征：表达式一定有返回值，可以赋值给变量，可以打印，可以嵌套在其他代码里。

而语句是完成一个操作，不一定有返回值（比如if、for、var声明），这是新手最容易混淆的点。

二、模板字符串里写表达式，到底怎么理解？

模板字符串是ES6的语法，用反引号 ` 包裹，替代传统的字符串拼接。

核心规则：模板字符串中，用 ${} 包裹的全部都是表达式，里面可以写：变量、运算、判断、函数、三元运算符……只要能算出值，都能放！

不是只能写变量，任何合法JS表达式都能嵌套，这是它最强大的地方。

模板字符串表达式 demo：

// 1. 定义基础变量
let name = "前端小白";
let age = 22;
let score = 95;

// 2. 模板字符串基础：放入变量表达式
let str1 = `大家好，我是${name}，今年${age}岁`;
console.log(str1); // 输出：大家好，我是前端小白，今年22岁

// 3. 模板字符串：放入算术表达式
let str2 = `我的考试分数是${score}，扣了${100 - score}分`;
console.log(str2); // 输出：我的考试分数是95，扣了5分

// 4. 模板字符串：放入三元运算符（表达式）
let str3 = `${age >= 18 ? '已成年' : '未成年'}`;
console.log(str3); // 输出：已成年

// 5. 模板字符串：嵌套复杂表达式 + 函数调用
functiongetLevel(s){
    return s >= 90 ? '优秀' : '及格';
}
let str4 = `成绩评定：${getLevel(score)}，总分：${score + 5}`;
console.log(str4); // 输出：成绩评定：优秀，总分：100

一句话总结：${} 里 = 任意JS表达式，有返回值就能放，这就是模板字符串写表达式的本质。

三、JS运算符全分类

JS运算符按功能分为：算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符、其他运算符； 按操作数个数分为：一元运算符、二元运算符、三元运算符。

（一）按操作数分类：一元、二元、三元运算符

1. 一元运算符：只需要一个操作数

符号在前/后，只对一个值做运算，常见：++、--、!、+、-、typeof。

let a = 10;

// 后置自增：先使用值，再+1
console.log(a++); // 输出10，执行完这行 a 变成11
// 前置自增：先+1，再使用值
console.log(++a); // 输出12

// 一元取反运算符
let flag = true;
console.log(!flag); // 输出false，取反，一元运算符

// typeof 一元运算符，返回数据类型
console.log(typeof a); // 输出number

2. 二元运算符：需要两个操作数

JS里绝大多数运算符都是二元，比如：+、-、*、/、>、&&、= 等，左右各一个值。

// 算术二元
let b = 5 + 3; // 左右两个操作数：5和3
// 比较二元
console.log(10 > 5); // 左右两个操作数：10和5
// 逻辑二元
console.log(true && false); // 左右两个操作数

3. 三元运算符：唯一三个操作数，也叫条件运算符

语法：条件 ? 表达式1 : 表达式2 条件为真执行表达式1，为假执行表达式2，有返回值，属于表达式。

let score = 88;
// 三元运算符：三个操作数（条件、真结果、假结果）
let res = score >= 60 ? "考试通过" : "考试挂科";
console.log(res); // 输出：考试通过

// 三元运算符可以嵌套（都是表达式，可套娃）
let level = score >= 90 ? "优秀" : (score >= 60 ? "及格" : "不及格");
console.log(level); // 输出：及格

（二）按功能分类：六大核心运算符

1. 算术运算符（二元为主，用于数学计算）

包含：+ 加、- 减、* 乘、/ 除、% 取余、** 幂运算

let x = 10;
let y = 3;

console.log(x + y); // 13 加法
console.log(x - y); // 7 减法
console.log(x * y); // 30 乘法
console.log(x / y); // 3.3333333333333335 除法
console.log(x % y); // 1 取余（求余数，重点！判断奇偶用）
console.log(x ** y); // 1000 幂运算，10的3次方

// + 号特殊：一边字符串则拼接
console.log(10 + "20"); // 输出'1020' 字符串拼接

2. 赋值运算符（二元，给变量赋值）

基础：= 复合：+=、-=、*=、/=、%=

let num = 20; // 基础赋值

num += 5; // 等价 num = num + 5 → 25
num -= 3; // 等价 num = num - 3 → 22
num *= 2; // 等价 num = num * 2 → 44
num /= 4; // 等价 num = num / 4 → 11
num %= 5; // 等价 num = num % 5 → 1

console.log(num); // 最终输出1

3. 比较运算符（二元，返回布尔值 true/false）

用于判断，结果一定是true或false，常用于if、for、三元。 包含：==、===、!=、!==、>、<、>=、<=

重点：== 只比较值，自动类型转换；=== 严格比较，值和类型都要相同，开发推荐用===。

console.log(5 == "5"); // true，类型转换后值相等
console.log(5 === "5"); // false，类型不同，严格不相等

console.log(10 > 8); // true
console.log(6 <= 6); // true
console.log(3 != 5); // true
console.log(3 !== "3"); // true

4. 逻辑运算符（二元/一元，用于多条件判断）

&& 逻辑与（全真为真，一假则假） || 逻辑或（一真为真，全假则假） ! 逻辑非（一元，取反）。

let a = true;
let b = false;

console.log(a && b); // false 与：两边都真才真
console.log(a || b); // true 或：一边真就真
console.log(!a); // false 非：取反

// 实际场景：判断年龄同时满足大于18且小于60
let age = 25;
console.log(age > 18 && age < 60); // true

5. 条件运算符（三元运算符，唯一三元）

let score = 88;
// 三元运算符：三个操作数（条件、真结果、假结果）
let res = score >= 60 ? "考试通过" : "考试挂科";
console.log(res); // 输出：考试通过

// 三元运算符可以嵌套（都是表达式，可套娃）
let level = score >= 90 ? "优秀" : (score >= 60 ? "及格" : "不及格");
console.log(level); // 输出：及格

6. 其他常用运算符

• typeof
  ：判断数据类型（一元）。
• instanceof
  ：判断对象类型。
• ?.
   可选链、?? 空值合并（ES6+新运算符）。
• ,
   逗号运算符。

// typeof
console.log(typeof"hello"); // string

// 可选链：防止对象属性不存在报错
let user = { name: "张三" };
console.log(user?.age); // undefined，不报错

// 空值合并：左边是null/undefined，才取右边
let name = null ?? "未知用户";
console.log(name); // 未知用户

四、运算符优先级（不用死背，记核心规则）

运算符优先级决定先算谁，后算谁，和小学数学先乘除后加减一样。

优先级从高到低核心口诀

一元运算符 > 算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。

简单记：

1. 括号 () 最高，想先算啥包啥。
2. 自增自减 > 乘除取余 > 加减。
3. 比较 > 与 > 或。
4. 赋值最低，最后算。

// 没有括号：先算 * ，再算 +
let res1 = 10 + 5 * 2; // 10+10=20
// 有括号：括号优先，先算+
let res2 = (10 + 5) * 2; // 15*2=30

// 综合优先级：比较 > 逻辑或
let res3 = 5 > 3 || 2 < 1 && 6 > 4;
// 先算 5>3=true，2<1=false，6>4=true
// 再算 false && true = false
// 最后算 true || false = true
console.log(res3); // true

万能技巧：记不住优先级，直接加括号 ()，可读性拉满，还不会出错！

五、总结

1. 表达式 = 能算出值的代码，模板字符串 ${} 里只能放表达式，不能放语句。
2. 一元运算符：1个操作数，二元运算符：2个，三元运算符：唯一3个（条件运算符）、
3. 优先级不用死记，括号优先，不确定就加括号。
   
4. 模板字符串是表达式的“容器”，变量、运算、三元、函数都能往里塞。

千里之行，始于足下。

阅读原文：原文链接