URLs, query parameters, and encoding
Build request URLs safely with URL and URLSearchParams.
- Difficulty
- beginner
- Time
- 35 minutes
- Last verified
- 9/21/2026
What you will build
Build request URLs safely with URL and URLSearchParams.
Understand the idea first
Build request URLs safely with URL and URLSearchParams.
Build it step by step
const url = new URL('https://api.example.com/search');
url.searchParams.set('q', 'HTML 表单');
url.searchParams.set('limit', '5');
console.log(url.toString());- Open the previous project and record its result.
- Type the example and complete: Build a URL with a Chinese query, page, and limit, then read each parameter back.
- Change one input, predict, then verify.
- Create and repair: Do not concatenate spaces, ampersands, or question marks manually.
Read the important lines
- Build request URLs safely with URL and URLSearchParams.
- Read input, processing, and output separately.
- Verify another input and an edge case.
Common mistakes and what to check
| Symptom | What to check |
|---|---|
| Unexpected result | Do not concatenate spaces, ampersands, or question marks manually. |
| Nothing changes | Save, verify paths, and read the first relevant Console error. |
Practice without copying
Build a URL with a Chinese query, page, and limit, then read each parameter back.
Check the answer after you try
Rebuild and explain the decisions. Check: Do not concatenate spaces, ampersands, or question marks manually.
Completion check
- I produced the required visible result
- I can explain the input, processing, and output
- I tested normal, edge, and failure cases