JavaScript 字符串补位

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/3

Unlocked Steps1/3

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 编号补零（左补）
实现 orderCode(n)，把编号补齐为 5 位，例如 23 -> 00023。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Define function: orderCode(n)
Self-check: orderCode(23) => "00023"

2) Beginner Explanation (Current Step)

Step task: 实现 orderCode(n)，把编号补齐为 5 位，例如 23 -> 00023。
Define function(s): orderCode, then verify results with test inputs.
This step has a specific expected result. Focus on making the function return the correct value.
A function is a reusable block of code. Define it first, then call it.
`return` sends a result back. Without return, you usually can't get the function's result.

3) Starter Template (Type along)

function orderCode(n) {
  return null;
}
// Self-check: orderCode(23) should return "00023"
console.log(orderCode(23));

4) Rule Validation & Hints

📋 当前任务 - Step 1

定义 orderCode
orderCode(23) = 00023

🔐 学习提示

📖 快速参考

数字没有 padStart 方法，先用 String(n) 转成字符串再补位。

About This Exercise

当你打印列表时，经常会遇到这样的问题：同一列长短不齐，看起来很乱。

ES8 的字符串补位方法可以快速解决：

padStart：左侧补齐（常用于编号补零）
padEnd：右侧补齐（常用于文本对齐）

这一关你会做出一条格式统一的“报表行”。

Beginner⏱ 15-20 min

Learning Objectives

理解 padStart / padEnd 的方向和用途
掌握数字编号补零的常见写法
能输出固定宽度的文本行

Scenario

你要给学习平台做一个“简易控制台报表”：左边是订单/课程编号，右边是名称。输出必须整齐，方便老师快速扫读。

Why Do This

Frontend JS is not just about knowing the syntax — the key is reliably manipulating the DOM and managing interaction state.
Break down the event flow (trigger -> handle -> update UI) before coding, and you will make significantly fewer errors.
Rule-based validation helps you develop a testable frontend mindset.

Hands-on Practice

Write out the event flow in comments first, then implement the functions.
Add an edge case branch for invalid input or empty data.
Explain why each validation rule is needed.

Common Mistakes

Only testing the happy path without verifying edge inputs or repeated clicks.
Mixing event binding and state updates together, making future maintenance difficult.
Console output looks correct but the UI is not actually updated.

Deliverable

A reusable interaction component scaffold (event flow description + key functions + edge case handling).

My Progress

Completed Steps0 / 3

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passCan explain each line of your codeCan name a real-world business scenario for this

Reflection Questions (Recommended)

Describe the event flow of this Lab in 2-3 sentences (trigger -> handle -> update).

What edge case did you add? Why is it easy to miss?

How confident are you with this interaction pattern now?

Not confident yet, need more practiceCan complete similar tasks independentlyCan teach others how to do it