// 中文变量名是合法的
let 名字 = "Alice";
let 年龄 = 20;
console.log(`${名字}的年龄是${年龄}`);

// 希腊字母也可以
let π = 3.14159;
let α = 0.1, β = 0.2;
console.log(α + β);

// 合法的标识符
let myVariable = "valid";
let _private = "valid";
let $jquery = "valid";
let camelCase = "valid";
let PascalCase = "valid";
let snake_case = "valid";

// 命名约定
let userName = "Alice";      // 变量：camelCase
let MAX_SIZE = 100;          // 常量：UPPER_SNAKE_CASE
function calculateTotal() {} // 函数：camelCase
class UserProfile {}         // 类：PascalCase

// 关键字（不能使用）
// break, case, catch, class, const, continue, debugger, default,
// delete, do, else, export, extends, finally, for, function, if,
// import, in, instanceof, new, return, super, switch, this, throw,
// try, typeof, var, void, while, with, yield

// 未来保留字
// enum, implements, interface, let, package, private, protected,
// public, static, await

// 特殊值（也不能用作标识符）
// null, true, false

// 数字字面量
let num = 42;
let float = 3.14;
let hex = 0xFF;
let binary = 0b1010;
let octal = 0o12;
let bigint = 9007199254740991n;

// 字符串字面量
let str1 = "hello";
let str2 = 'world';
let str3 = `template`;  // 模板字面量

// 布尔字面量
let bool = true;

// 空值字面量
let empty = null;
let undef = undefined;

// 数组字面量
let arr = [1, 2, 3];

// 对象字面量
let obj = {name: "Alice", age: 20};

// 正则表达式字面量
let regex = /pattern/gi;

let name = "Alice";
let age = 20;

// 表达式插值
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);

// 多行字符串
let html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    let val = values[i] ? `<mark>${values[i]}</mark>` : '';
    return result + str + val;
  }, '');
}

let result = highlight`Hello ${name}, you are ${age} years old.`;
console.log(result);

// 这些情况会自动插入分号
let x = 1  // 自动插入
let y = 2  // 自动插入

// 危险情况
let a = 1
let b = a
(function() {
  // 这里会被解析为 a(...) 调用！
  // 而不是 a; (function() {...})
})();

// 解决方案：总是使用分号
let c = 1;
let d = c;
(function() {
  console.log("safe");
})();

// 另一个危险情况
// return语句后面的值如果换行，会自动插入分号
function getValue() {
  return  // 这里自动插入分号！
  {
    value: 42
  };
}
console.log(getValue());  // undefined

// 正确写法
function getValueFixed() {
  return {
    value: 42
  };
}

// 好的命名实践
const MAX_RETRY_COUNT = 3;
const userName = "Alice";
const isUserLoggedIn = true;
const getUserProfile = (id) => { /* ... */ };
class UserProfileComponent { /* ... */ }

// 避免的命名
const a = 42;           // 无意义
const data = [];        // 太模糊
const d = new Date();   // 单字母（循环变量除外）
const temp = 42;        // 临时变量应该有更具体的名字

// 条件表达式
let isLoggedIn = true;
let message = `Welcome${isLoggedIn ? '' : ' back'}!`;

// 函数调用
let items = [1, 2, 3];
let list = `Items: ${items.join(', ')}`;

// 嵌套模板
let users = [
  {name: "Alice", age: 20},
  {name: "Bob", age: 25}
];

let html = `
  <ul>
    ${users.map(u => `
      <li>${u.name} (${u.age})</li>
    `).join('')}
  </ul>
`;
console.log(html);