ترميز URL في JavaScript — encodeURI و encodeURIComponent وأفضل الممارسات

توفر JavaScript وظيفتين مدمجتين لترميز URL:

encodeURIComponent()

ترمّز جميع الأحرف باستثناء: A-Z a-z 0-9 - _ . ! ~ * ' ( )

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

استخدمها لترميز قيم معاملات الاستعلام الفردية أو مقاطع المسار أو أي بيانات تصبح جزءًا من عنوان URL.

encodeURI()

ترمّز جميع الأحرف باستثناء ما سبق بالإضافة إلى أحرف URL المحجوزة: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

استخدمها عند ترميز سلسلة عنوان URL كاملة.

خطأ شائع

// خطأ — يكسر بنية عنوان URL
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// صحيح — يحافظ على البنية
encodeURI('https://example.com/page')
// https://example.com/page

اختبر هذه الوظائف مباشرة باستخدام أداة ترميز/فك ترميز URL.