变量：给一份数据起名字

先读懂这一行

const projectName = '漫画工作室'

const projectName = '漫画工作室'
↑         ↑       ↑       ↑
创建一个   变量名字   放进去   一段文字
不能重新
指向别处

把它读成一句人话：创建一个叫 projectName 的盒子，把“漫画工作室”放进去。

const 不代表盒子里面的复杂对象永远不能变化，而是这个名字不能重新指向另一个值。零基础阶段先记住：默认优先用 const。

四种先认识的数据

const title = '漫画工作室'  // string：文字
const nodeCount = 12        // number：数字
const isLoggedIn = true     // boolean：真或假
const selectedNode = null   // null：现在明确没有选中东西

文字要放在引号里。'12' 是文字，12 才是能直接计算的数字。

真实项目里的变量

manga_studio/canvas-v2/src/App.tsx 第 63–65 行：

const [currentVersion, setCurrentVersion] = useState<string>('')
const [globalError, setGlobalError] = useState<GlobalErrorDialogDetail | null>(null)
const [showWebStorageFallback, setShowWebStorageFallback] = useState(false)

• currentVersion 从空文字开始。
• globalError 从“没有错误”开始，所以是 null。
• showWebStorageFallback 从“不显示”开始，所以是 false。

动手练习让数字变成文字

你的任务

只给第 2 行的 12 加上一对单引号，然后观察 12 + 3 为什么变成 123。

1. 找到第 2 行的数字 12
2. 把它改成带引号的文字：'12'
3. 点“运行并检查”

代码区你可以直接点进去修改

1234

const projectName = '漫画工作室' const nodeCount = 12 console.log(projectName) console.log(nodeCount + 3)

电脑输出

还没有运行。完成左边的小任务后，点下面的绿色按钮。

'25' 和 25 是同一种数据吗？

答案：不是。'25' 是文字 string，25 是数字 number。前者加 5 常会得到 '255'，后者得到 30。