URL Decode JavaScript — decodeURIComponent()

·Front-end & Node.js Developer·İnceleyenMarcus Webb·Yayınlandı

Ücretsiz URL Çözücü Online aracını doğrudan tarayıcınızda kullanın — kurulum gerektirmez.

URL Çözücü Online Online Dene →

Yüzde kodlanmış dizeler JavaScript kodunda sürekli karşımıza çıkar — bir arama sorgusu q=standing+desk%26price%3A200 olarak, bir OAuth yönlendirmesi next=https%3A%2F%2Fdashboard.internal%2F olarak, bir depolama yolu reports%2F2025%2Fq1.pdfolarak gelir. JavaScript'te URL çözme işlemi, üç yerleşik fonksiyondan doğru olanı seçmeye indirgenir: decodeURIComponent(), decodeURI() ve URLSearchParams — bu üçü arasındaki seçim, üretim kod tabanlarında gördüğüm sessiz veri bozulmalarının çoğunun temel nedenidir; özellikle + işaretinin boşluk olarak ele alınması ve çift çözme sorunları. Kod yazmadan hızlı bir çözme işlemi için ToolDeck'in URL Kod Çözücüsü tarayıcıda anında işler. Bu JavaScript URL çözme eğitimi üç fonksiyonu da derinlemesine ele alır (ES2015+ / Node.js 10+): her birini ne zaman kullanacağınızı, boşluklar ve ayrılmış karakterler için nasıl farklılaştıklarını, dosya ve HTTP isteklerinden çözmeyi, güvenli hata işlemeyi ve en ince üretim hatalarına yol açan dört hatayı.

  • decodeURIComponent() tüm yüzde kodlanmış dizileri çözer — bireysel sorgu parametresi değerleri ve yol segmentleri için doğru seçimdir
  • decodeURI() / ? & = # : gibi yapısal URI karakterlerini korur — yalnızca tam bir URL dizesini çözerken kullanın, bireysel değerler için asla kullanmayın
  • URLSearchParams.get() zaten çözülmüş değerler döndürür — bunun üzerine decodeURIComponent() çağırmak çift çözmeye neden olur
  • decodeURIComponent() + işaretini boşluk olarak çözmez — form kodlamalı (application/x-www-form-urlencoded) veriler için URLSearchParams kullanın ya da çözmeden önce + işaretini değiştirin
  • Girdi kullanıcı verilerinden geldiğinde decodeURIComponent() öğesini her zaman try/catch ile sarın — tek başına bir % veya eksik dizi URIError fırlatır

URL Çözme Nedir?

Yüzde kodlama (resmi olarak RFC 3986'da tanımlanmıştır), bir URL'de güvensiz veya yapısal önemi olan karakterleri bir % işareti ve ardından iki onaltılık basamakla — karakterin UTF-8 bayt değeriyle — değiştirir. URL çözme bu dönüşümü tersine çevirir: her %XX dizisi orijinal baytına geri dönüştürülür ve elde edilen bayt dizisi UTF-8 metin olarak yorumlanır. Boşluk %20'den, eğik çizgi %2F'den, ASCII dışı ü karakteri %C3%BC'den (iki baytlık UTF-8 gösterimi) çözülür.

Hiçbir zaman kodlanmayan karakterlere — ayrılmamış karakterler denir — A–Z ve a–z harfleri, 0–9 rakamları ve - _ . ~sembolleri girer. Diğer her şey ya URL'de yapısal bir rol üstlenir (örneğin / yol segmentlerini, & sorgu parametrelerini ayırır) ya da veri olarak kullanıldığında kodlanmalıdır. Pratik sonuç: status=active&tier=premium gibi tek bir sorgu parametresi değeri olarak kodlanmış bir arama filtresi, orijinalinden çok farklı görünür.

Before · text
After · text
// Yüzde kodlanmış — bir HTTP isteğinde veya webhook yükünde alındığı haliyle
"q=price%3A%5B200+TO+800%5D%20AND%20brand%3ANorthwood%20%26%20status%3Ain-stock"
// URL çözme sonrası — orijinal Elasticsearch sorgu filtresi
"q=price:[200 TO 800] AND brand:Northwood & status:in-stock"

decodeURIComponent() — Değerleri Çözmek için Standart Fonksiyon

decodeURIComponent(), JavaScript'te URL çözmenin ana çalışma fonksiyonudur. Girdi dizesindeki her %XXdizisini çözer — URL'de yapısal anlama sahip karakterler dahil, örneğin %2F (eğik çizgi), %3F (soru işareti), %26 (ve işareti) ve %3D(eşittir işareti). Bu onu bireysel sorgu parametresi değerlerini ve yol segmentlerini çözmek için doğru seçim yapar, ancak tam bir URL'yi çözmek için yanlış seçimdir — orada yapısal karakterlerin kodlanmış kalması gerekir. Global bir fonksiyondur: herhangi bir JavaScript ortamında import gerekmez.

Minimal çalışan örnek

JavaScript (browser / Node.js)
// Bireysel sorgu parametresi değerlerini çözme — yaygın durum

const city     = decodeURIComponent('S%C3%A3o%20Paulo')          // 'São Paulo'
const district = decodeURIComponent('It%C3%A1im%20Bibi')         // 'Itáim Bibi'
const category = decodeURIComponent('office%20furniture')         // 'office furniture'
const filter   = decodeURIComponent('price%3A%5B200+TO+800%5D')  // 'price:[200+TO+800]'
// Not: + boşluk olarak çözülmez — karşılaştırma tablosundaki + bölümüne bakın

console.log(city)      // São Paulo
console.log(district)  // Itáim Bibi
console.log(category)  // office furniture
console.log(filter)    // price:[200+TO+800]

Sorgu parametresinden çıkarılan yönlendirme URL'sini çözme

JavaScript
// Yönlendirme URL'si, parametre değeri olarak gömüldüğünde yüzde kodlanmıştı
// alıcı taraf: çıkar, sonra kullan — URLSearchParams ile manuel çözme gerekmez

const incomingUrl = 'https://auth.company.com/callback' +
  '?next=https%3A%2F%2Fdashboard.internal%2Freports%3Fview%3Dweekly%26team%3Dplatform' +
  '&session_id=sid_7x9p2k'

const url       = new URL(incomingUrl)
const rawNext   = url.searchParams.get('next')       // URLSearchParams tarafından otomatik çözüldü
const sessionId = url.searchParams.get('session_id') // 'sid_7x9p2k'

// rawNext zaten çözülmüş: 'https://dashboard.internal/reports?view=weekly&team=platform'
// decodeURIComponent(rawNext) tekrar ÇAĞIRMAYIN — bu çift çözme olur

const nextUrl = new URL(rawNext!)
console.log(nextUrl.hostname)                    // dashboard.internal
console.log(nextUrl.searchParams.get('view'))    // weekly
console.log(nextUrl.searchParams.get('team'))    // platform

ASCII dışı ve Unicode yol segmentlerini çözme

JavaScript
// Uluslararasılaştırılmış yol segmentlerine sahip REST API
// Orijinal karakterin her UTF-8 baytı ayrı ayrı yüzde kodlandı

const encodedSegments = [
  '%E6%9D%B1%E4%BA%AC',   // 東京  (Tokyo)   — karakter başına 3 bayt
  'M%C3%BCnchen',         // München          — ü 2 bayt olarak kodlandı
  'caf%C3%A9',            // café             — é önceden birleştirilmiş NFC olarak
  'S%C3%A3o%20Paulo',     // São Paulo
]

encodedSegments.forEach(seg => {
  console.log(decodeURIComponent(seg))
})
// 東京
// München
// café
// São Paulo

// Depolama API URL'sinden dosya anahtarı çıkarma
// Nesne anahtarı / içerdiğinden yol segmenti içinde %2F olarak kodlandı
const storageUrl = 'https://storage.api.example.com/v1/objects/reports%2F2025%2Fq1-financials.pdf'
const rawKey     = new URL(storageUrl).pathname.replace('/v1/objects/', '')
// .pathname URL düzeyi kodlamayı çözer ama %2F (URL düzeyinde %252F) kalır
// Son adım için decodeURIComponent kullanın:
const fileKey = decodeURIComponent(rawKey)  // 'reports/2025/q1-financials.pdf'
console.log(fileKey)
Not:decodeURIComponent(), girdi iki geçerli onaltılık basamakla takip edilmeyen bir % içerdiğinde URIError fırlatır — örneğin bir dizenin sonundaki tek % veya %GH gibi bir dizi. Kullanıcı tarafından sağlanan girdiyi çözerken her zaman try/catch ile sarın. Güvenli çözme kalıpları aşağıdaki Hata İşleme bölümünde ele alınmaktadır.

JavaScript URL Çözme Fonksiyonları — Karakter Referansı

Üç yerleşik çözme fonksiyonu, tam olarak hangi kodlanmış dizileri çözdükleri konusunda farklılık gösterir. Tablo, pratikte en önemli karakterler için davranışı göstermektedir:

KodlanmışKarakterdecodeURIComponent()decodeURI()URLSearchParams
%20boşlukboşluk ✅boşluk ✅boşluk ✅
++ (form)+ (korundu)+ (korundu)boşluk ✅
%2B+ değişmezi+ ✅+ ✅+ ✅
%26&& ✅& (korundu) ❌& ✅
%3D== ✅= (korundu) ❌= ✅
%3F?? ✅? (korundu) ❌? ✅
%23## ✅# (korundu) ❌# ✅
%2F// ✅/ (korundu) ❌/ ✅
%3A:: ✅: (korundu) ❌: ✅
%40@@ ✅@ (korundu) ❌@ ✅
%25%% ✅% ✅% ✅
%C3%BCüü ✅ü ✅ü ✅

İki kritik satır + ve yapısal karakterlerdir (%26, %3D, %3F). URLSearchParams, +'yı boşluk olarak çözer çünkü application/x-www-form-urlencoded spesifikasyonunu takip eder — HTML form gönderimleri için doğru, ancak decodeURIComponent()'in aynı karakteri işleme biçiminden farklı. Ve decodeURI(), %26, %3D ve %3F'yi sessizce atlar — bir değer gerçekten kodlanmış bir ve işareti veya eşittir işareti içerene kadar doğru görünür.

decodeURI() — Yapısını Bozmadan Tam URL Çözme

decodeURI(), encodeURI()'in karşılığıdır. Bir URI'de yapısal anlama sahip karakterleri korurken tam bir URL dizesini çözer: ; , / ? : @ & = + $ #. Bunlar yüzde kodlanmış biçimde bırakılır (veya girdide kodlanmamış göründükleri sürece gerçek karakter olarak). Bu decodeURI()'yi, yolunda veya ana makine adında ASCII dışı karakterler içerebilecek tam URL'leri sanitize etmek için güvenli kılar — sorgu dizesi yapısını yanlışlıkla çökmeden.

ASCII dışı yol segmentleri içeren bir URL'yi sanitize etme

JavaScript
// Uluslararasılaştırılmış yol segmentleri ve yapılandırılmış sorgu dizesine sahip CDN URL'si
// decodeURI() ASCII dışı yolu çözer ama ? & = sağlam tutar

const encodedUrl =
  'https://cdn.example.com/assets/%E6%9D%B1%E4%BA%AC%2F2025%2Fq1-report.pdf' +
  '?token=eyJ0eXAiOiJKV1QiLCJhbGci&expires=1735689600'

const readable = decodeURI(encodedUrl)
console.log(readable)
// https://cdn.example.com/assets/東京/2025/q1-report.pdf?token=eyJ0eXAiOiJKV1QiLCJhbGci&expires=1735689600
// ↑ ASCII dışı çözüldü; ? & = korundu — URL yapısal olarak geçerli kaldı

// decodeURIComponent URL'yi bozar — : / ? & = hepsi bir kerede çözülür
const broken = decodeURIComponent(encodedUrl)
// 'https://cdn.example.com/assets/東京/2025/q1-report.pdf?token=eyJ0eXAiOiJKV1QiLCJhbGci&expires=1735689600'
// Burada aynı görünüyor, ancak 'https%3A%2F%2F...' gibi bir URL yok edilirdi
Not:Bireysel URL bileşenlerine de erişmeniz gerektiğinde decodeURI() yerine URL yapıcısını tercih edin. new URL(str) girdiyi normalleştirir, yapısını doğrular ve zaten çözülmüş özellikler olarak .pathname, .searchParams ve .hostname'i sunar. decodeURI()'yi yalnızca dize sonucuna ihtiyaç duyduğunuzda ve URL yapıcısını kullanamadığınızda (örneğin global URL sınıfı olmayan çok eski Node.js 6 ortamlarında) saklayın.

URLSearchParams — Sorgu Dizeleri için Otomatik Çözme

URLSearchParams, modern JavaScript'te sorgu dizelerini ayrıştırmanın deyimsel yoludur. .get(), .getAll() veya yinelemeyle döndürülen her değer otomatik olarak çözülür — form kodlamalı veriler için +'nın boşluk olarak çözülmesi dahil. Tüm modern tarayıcılarda ve Node.js 10+'da global olarak kullanılabilir, import gerektirmez ve manuel dize bölmenin yanlış işlediği uç durumları doğru işler.

Gelen bir sorgu dizesini ayrıştırma

JavaScript (browser / Node.js 10+)
// Webhook geri çağırma veya OAuth yönlendirme sorgu dizesini ayrıştırma
const rawSearch =
  '?event_id=evt_9c2f4a1b' +
  '&product_name=Standing+Desk+Pro' +
  '&filter=price%3A%5B200+TO+800%5D' +
  '&tag=ergonomic&tag=adjustable' +
  '&redirect=https%3A%2F%2Fdashboard.internal%2Forders%3Fview%3Dpending'

const params = new URLSearchParams(rawSearch)

console.log(params.get('event_id'))      // 'evt_9c2f4a1b'
console.log(params.get('product_name'))  // 'Standing Desk Pro'       ← + boşluk olarak çözüldü
console.log(params.get('filter'))        // 'price:[200+TO+800]'      ← %3A ve %5B çözüldü
console.log(params.getAll('tag'))        // ['ergonomic', 'adjustable']
console.log(params.get('redirect'))      // 'https://dashboard.internal/orders?view=pending'

// Tüm parametreler üzerinde yineleme
for (const [key, value] of params) {
  console.log(`${key}: ${value}`)
}
// event_id: evt_9c2f4a1b
// product_name: Standing Desk Pro
// filter: price:[200+TO+800]
// tag: ergonomic
// tag: adjustable
// redirect: https://dashboard.internal/orders?view=pending

Mevcut tarayıcı URL'sinden sorgu parametrelerini ayrıştırma

JavaScript (browser)
// Mevcut URL: https://app.example.com/search
//   ?q=standing+desk
//   &category=office+furniture
//   &sort=price_asc
//   &page=2

interface SearchFilters {
  query:    string | null
  category: string | null
  sort:     string
  page:     number
}

function getSearchFilters(): SearchFilters {
  const params = new URLSearchParams(window.location.search)
  return {
    query:    params.get('q'),                       // 'standing desk'
    category: params.get('category'),                // 'office furniture'
    sort:     params.get('sort') ?? 'relevance',
    page:     Number(params.get('page') ?? '1'),
  }
}

const filters = getSearchFilters()
console.log(filters.query)     // standing desk   (+ otomatik çözüldü)
console.log(filters.category)  // office furniture

Dosya ve API Yanıtlarından URL Kodlamalı Veriyi Çözme

Gerçek projelerde sürekli karşılaşılan iki senaryo vardır: yüzde kodlanmış veri içeren disk üzerindeki bir dosyayı işlemek (erişim günlükleri, veri dışa aktarımları, webhook yakalama dosyaları) ve bir Node.js sunucusunda gelen HTTP isteğinin URL'sini ayrıştırmak. Her ikisi de aynı ilkeyi izler — manuel dize bölme yerine URL yapıcısı veya URLSearchParams kullanmak — ancak ayrıntılar farklıdır.

Dosyadan URL kodlamalı kayıtları okuma ve çözme

JavaScript (Node.js 10+)
import { createReadStream } from 'fs'
import { createInterface } from 'readline'

// Dosya: orders-export.txt — satır başına bir URL kodlamalı kayıt
// customer_name=Mehmet+Y%C4%B1lmaz&order_id=ord_9c2f4a&product=Standing+Desk+Pro&total=4999%20TRY
// customer_name=Ay%C5%9Fe+Kaya&order_id=ord_7b3a1c&product=Ergonomic+Chair&total=2499%20TRY
// customer_name=%C4%B0stanbul+M%C3%BC%C5%9Fterisi&order_id=ord_2e8d5f&product=Monitor+Arm&total=1499%20TRY

interface Order {
  customerName: string | null
  orderId:      string | null
  product:      string | null
  total:        string | null
}

async function parseOrdersFile(filePath: string): Promise<Order[]> {
  const fileStream = createReadStream(filePath, { encoding: 'utf-8' })
  const rl         = createInterface({ input: fileStream, crlfDelay: Infinity })
  const orders: Order[] = []

  for await (const line of rl) {
    if (!line.trim()) continue

    // URLSearchParams, + işaretini boşluk ve %XX dizilerini otomatik çözer
    const params = new URLSearchParams(line)

    orders.push({
      customerName: params.get('customer_name'),  // 'Mehmet Yılmaz'
      orderId:      params.get('order_id'),        // 'ord_9c2f4a'
      product:      params.get('product'),         // 'Standing Desk Pro'
      total:        params.get('total'),           // '4999 TRY'
    })
  }

  return orders
}

const orders = await parseOrdersFile('./orders-export.txt')
console.log(orders[0])
// { customerName: 'Mehmet Yılmaz', orderId: 'ord_9c2f4a', product: 'Standing Desk Pro', total: '4999 TRY' }

Arama sorgularını çözmek için Nginx erişim günlüğünü ayrıştırma

JavaScript (Node.js)
import { createReadStream } from 'fs'
import { createInterface } from 'readline'

// Nginx erişim günlüğü satırları şöyle görünür:
// 192.168.1.42 - - [11/Mar/2026:10:23:01 +0000] "GET /api/search?q=standing%20desk%26brand%3ANorthwood&sort=price_asc HTTP/1.1" 200 1842

async function extractSearchQueries(logFile: string): Promise<string[]> {
  const rl     = createInterface({ input: createReadStream(logFile), crlfDelay: Infinity })
  const queries: string[] = []

  for await (const line of rl) {
    // Günlük satırından istek yolunu çıkar
    const match = line.match(/"GET ([^ ]+) HTTP/)
    if (!match) continue

    try {
      const requestUrl = new URL(match[1], 'http://localhost')
      const query      = requestUrl.searchParams.get('q')
      if (query) queries.push(query)  // URLSearchParams otomatik çözer
    } catch {
      // Hatalı biçimli satırları atla — erişim günlükleri kesilmiş girişler içerebilir
    }
  }

  return queries
}

const queries = await extractSearchQueries('/var/log/nginx/access.log')
console.log(queries)
// ['standing desk&brand:Northwood', 'ergonomic chair', 'monitor arm 27 inch']

Node.js HTTP sunucusunda sorgu parametrelerini ayrıştırma

JavaScript (Node.js 10+)
import http from 'http'

// Gelen URL: /api/products?q=standing+desk&warehouse=eu%2Dwest%2D1&minStock=10&cursor=eyJpZCI6MTIzfQ%3D%3D

const server = http.createServer((req, res) => {
  // Tam URL oluştur — URL yapıcısının gerektirdiği ikinci arg baz URL'dir
  const requestUrl = new URL(req.url!, 'http://localhost')

  const searchQuery = requestUrl.searchParams.get('q')            // 'standing desk'
  const warehouseId = requestUrl.searchParams.get('warehouse')    // 'eu-west-1'
  const minStock    = Number(requestUrl.searchParams.get('minStock') ?? '0')
  const cursor      = requestUrl.searchParams.get('cursor')       // 'eyJpZCI6MTIzfQ=='

  if (!warehouseId) {
    res.writeHead(400, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ error: 'warehouse parameter is required' }))
    return
  }

  const cursorData = cursor ? JSON.parse(Buffer.from(cursor, 'base64').toString()) : null

  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({ searchQuery, warehouseId, minStock, cursorData }))
})

server.listen(3000)

Geliştirme sırasında kodlanmış bir URL'yi incelemeniz gerektiğinde — ayrıştırma kodunu yazmadan önce webhook'un ne gönderdiğini anlamak için — bir betik çalıştırmadan doğrudan ToolDeck'in URL Kod Çözücüsü içine yapıştırın, çözülmüş biçimi anında görmek için.

Komut Satırında URL Çözme

Kabuk betikleri, CI ardışık düzenleri veya kodlanmış dizelerin hızlı tek seferlik incelemesi için tam bir betik yazmadan çalışan birkaç yaklaşım vardır. Node.js tek satırlıkları platformlar arasıdır; macOS ve Linux'ta python3 de her zaman kullanılabilir.

bash
# ── Node.js tek satırlıkları ──────────────────────────────────────────────

# Tek bir yüzde kodlanmış değeri çözme
node -e "console.log(decodeURIComponent(process.argv[1]))" "S%C3%A3o%20Paulo%20%26%20Rio"
# São Paulo & Rio

# Bir sorgu dizesini ayrıştırın ve her anahtar=değer çiftini (çözülmüş) yazdırın
node -e "
  const params = new URLSearchParams(process.argv[1])
  for (const [k, v] of params) console.log(`${k} = ${v}`)
" "q=standing+desk&warehouse=eu%2Dwest%2D1&minStock=10"
# q = standing desk
# warehouse = eu-west-1
# minStock = 10

# URL kodlamalı JSON gövdesini çöz ve güzel yazdır (webhook hata ayıklamada yaygın)
node -e "
  const raw = decodeURIComponent(process.argv[1])
  console.log(JSON.stringify(JSON.parse(raw), null, 2))
" '%7B%22event%22%3A%22purchase%22%2C%22amount%22%3A149.99%2C%22currency%22%3A%22EUR%22%7D'
# {
#   "event": "purchase",
#   "amount": 149.99,
#   "currency": "EUR"
# }

# ── Python tek satırlığı (çoğu macOS/Linux sisteminde kullanılabilir) ──────
# unquote_plus + işaretini de boşluk olarak çözer — form kodlamalı veriler için doğru
python3 -c "
from urllib.parse import unquote_plus
import sys
print(unquote_plus(sys.argv[1]))
" "Standing+Desk+%26+Ergonomic+Chair"
# Standing Desk & Ergonomic Chair

# ── curl — yanıt başlığından yönlendirme URL'sini kaydet ve çöz ──────────
curl -sI "https://api.example.com/short/abc123" | grep -i location |   node -e "
    const line = require('fs').readFileSync('/dev/stdin', 'utf8')
    const url  = line.replace(/^location:s*/i, '').trim()
    console.log(decodeURIComponent(url))
  "

decode-uri-component ile Zarif Çözme

Yerleşik decodeURIComponent(), hatalı biçimli herhangi bir dizide URIError fırlatır — iki onaltılık basamak olmadan sondaki %dahil. Kullanıcı tarafından sağlanan veya üçüncü taraf URL'leri işleyen üretim kodunda — arama sorgusu günlükleri, e-posta kampanyalarından tıklama URL'leri, kazınmış web verisi — hatalı biçimli diziler çökmelere yol açacak kadar yaygındır. decode-uri-component paketi (~30M haftalık npm indirme), fırlatmak yerine orijinal diziyi değiştirmeden döndürerek hatalı biçimli dizileri zarif biçimde işler.

bash
npm install decode-uri-component
# or
pnpm add decode-uri-component
JavaScript (Node.js)
import decodeUriComponent from 'decode-uri-component'

// Yerel fonksiyon hatalı girdide fırlatır — bir istek işleyicisini çökertebilir
try {
  decodeURIComponent('product%name%')   // ❌ URIError: URI malformed
} catch (e) {
  console.error('Yerel fırlattı:', (e as Error).message)
}

// decode-uri-component fırlatmak yerine ham diziyi döndürür
console.log(decodeUriComponent('product%name%'))
// product%name%   ← hatalı biçimli diziler olduğu gibi bırakıldı, fırlatma yok

// Geçerli diziler doğru şekilde çözülür
console.log(decodeUriComponent('S%C3%A3o%20Paulo%20%26%20Rio'))
// São Paulo & Rio

// Karışık: geçerli diziler çözülür, geçersizler korunur
console.log(decodeUriComponent('Berlin%20Office%20%ZZ%20HQ'))
// Berlin Office %ZZ HQ   ← %ZZ geçerli onaltılık değil — olduğu gibi tutuldu

// Bir günlük işleme ardışık düzeninde pratik kullanım
const rawSearchQueries = [
  'standing%20desk%20ergonomic',
  'price%3A%5B200+TO+800%5D',
  '50%25+off',       // ← decodeURIComponent ile fırlatırdı (tek %)
  'wireless%20keyboard%20%26%20mouse',
]

const decoded = rawSearchQueries.map(q => decodeUriComponent(q))
console.log(decoded)
// ['standing desk ergonomic', 'price:[200+TO+800]', '50%25+off', 'wireless keyboard & mouse']

Beklenmedik girdi geldiğinde hemen bilmek istediğiniz uygulama kodu için try/catch ile birlikte decodeURIComponent() kullanın. Bazı girdiler geçersiz kodlama içerse bile işlemeye devam etmek istediğiniz veri ardışık düzenleri, günlük işleyicileri ve webhook işleyicileri için decode-uri-component'e başvurun.

Hatalı Biçimli Yüzde Kodlanmış Dizeleri İşleme

Tek başına bir %, eksik bir dizi %A veya geçersiz bir çift %GH, decodeURIComponent()'in URIError: URI malformed fırlatmasına neden olur. Kullanıcı kontrollü girdi — arama sorguları, URL parçaları, URL içeren form alanları, e-posta kampanyası bağlantılarından parametreler — bu dizileri içerebilir. Dışarıya dönük herhangi bir kod için güvenli bir sarmalayıcı şarttır.

Yaygın senaryolar için güvenli çözme sarmalayıcıları

JavaScript
// ── 1. Temel güvenli çözme — hata durumunda orijinal dizeyi döndür ──────
function safeDecode(encoded: string): string {
  try {
    return decodeURIComponent(encoded)
  } catch {
    return encoded  // çözme başarısız olursa ham girdiyi döndür — asla çökme
  }
}

// ── 2. Güvenli çözme + + işaretini boşluk olarak işle (form kodlamalı değerler için) ──
function safeFormDecode(formEncoded: string): string {
  try {
    return decodeURIComponent(formEncoded.replace(/+/g, ' '))
  } catch {
    return formEncoded.replace(/+/g, ' ')  // geri kalan başarısız olsa bile en azından + değiştir
  }
}

// ── 3. Güvenli tam sorgu dizesi ayrıştırıcı → düz nesne ─────────────────
function parseQueryString(queryString: string): Record<string, string> {
  const result: Record<string, string> = {}
  try {
    const params = new URLSearchParams(queryString)
    for (const [key, value] of params) {
      result[key] = value  // URLSearchParams tüm çözmeyi dahili olarak işler
    }
  } catch {
    // Tamamen hatalı biçimli girdide sessizce boş döndür
  }
  return result
}

// Kullanım
console.log(safeDecode('S%C3%A3o%20Paulo'))         // São Paulo
console.log(safeDecode('search%20for%2050%25+off'))  // search for 50%+off
                                                     // → aslında tamam; burada % %25 anlamına gelir
console.log(safeDecode('malformed%string%'))         // malformed%string%  (fırlatma yok)

console.log(safeFormDecode('standing+desk+pro'))     // standing desk pro

console.log(parseQueryString('q=hello+world&tag=node%20js&page=2'))
// { q: 'hello world', tag: 'node js', page: '2' }

Yaygın Hatalar

Bu dört kalıbın üretimde sessiz veri bozulmasına veya beklenmedik çökmelere yol açtığını gördüm — genellikle bir değer özel karakter içerdiğinde ortaya çıkar, bu tam olarak birim testlerinden geçen ve gerçek kullanıcı verileriyle yüzeye çıkan hata türüdür.

Hata 1 — URLSearchParams değerini çift çözme

Sorun: URLSearchParams.get() zaten çözülmüş bir dize döndürür. Bunun üzerine decodeURIComponent() çağırmak değeri çift çözer — çözülmüş çıktıdaki kalan her %'yi %25'e dönüştürür, veriyi bozar. Düzeltme: URLSearchParams.get()'ten gelen değeri doğrudan kullanın — ek çözme gerekmez.

Before · JavaScript
After · JavaScript
// ❌ URLSearchParams zaten çözdü — tekrar çözmek % içeren değerleri bozar
const qs        = new URLSearchParams('rate=50%25&redirect=https%3A%2F%2Fdashboard.internal%2F')
const rawRate   = qs.get('rate')       // '50%'   ← zaten çözüldü
const wrongRate = decodeURIComponent(rawRate)
// '50%25'  ← ikinci geçişte % %25 olarak çözüldü — şimdi tekrar yanlış
// ✅ URLSearchParams.get() öğesini doğrudan kullanın — çözme otomatiktir
const qs       = new URLSearchParams('rate=50%25&redirect=https%3A%2F%2Fdashboard.internal%2F')
const rate     = qs.get('rate')        // '50%'   ← doğru, ekstra adım gerekmez
const redirect = qs.get('redirect')    // 'https://dashboard.internal/'
const parsed   = new URL(redirect!)    // Güvenle oluşturulabilir — zaten çözüldü
console.log(parsed.hostname)           // dashboard.internal

Hata 2 — Form kodlamalı veride + işaretini boşluk olarak çözmemek

Sorun: Form gönderimleri ve bazı OAuth kütüphaneleri boşlukları + olarak kodlar (application/x-www-form-urlencoded). Bu veriye decodeURIComponent() çağırmak +'yı gerçek artı işareti olarak bırakır. Düzeltme: form kodlamalı verileri ayrıştırmak için URLSearchParams kullanın veya decodeURIComponent() çağırmadan önce +'yı boşlukla değiştirin.

Before · JavaScript
After · JavaScript
// ❌ decodeURIComponent + işaretini boşluk değil gerçek artı olarak işler
// OAuth token uç noktası gönderir: grant_type=authorization_code&code=SplxlOBeZQQYb...
//   &redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback
// Bazı eski OAuth uygulamaları kodlarda da + kullanır
const formBody   = 'customer_name=Mehmet+Y%C4%B1lmaz&product=Standing+Desk+Pro&qty=2'
const [, rawVal] = formBody.split('&')[0].split('=')
const name       = decodeURIComponent(rawVal)
console.log(name)  // 'Mehmet+Yılmaz'  ← + boşluğa dönüştürülmedi
// ✅ URLSearchParams kullanın — application/x-www-form-urlencoded spec'ini takip eder
const formBody   = 'customer_name=Mehmet+Y%C4%B1lmaz&product=Standing+Desk+Pro&qty=2'
const params     = new URLSearchParams(formBody)
console.log(params.get('customer_name'))  // 'Mehmet Yılmaz'   ← + doğru şekilde boşluk olarak çözüldü
console.log(params.get('product'))        // 'Standing Desk Pro'

Hata 3 — Bireysel sorgu parametresi değerleri için decodeURI() kullanmak

Sorun: decodeURI(), %26 (&), %3D (=) veya %3F('?') çözmez — parametre değerleri içinde yaygın olarak kodlanan karakterler. Tek bir değeri çözmek için kullanmak bu dizileri sağlam bırakır ve sessizce yanlış çıktı üretir. Düzeltme: bireysel değerler için decodeURIComponent() kullanın; decodeURI()'yi tam URL dizeleri için saklayın.

Before · JavaScript
After · JavaScript
// ❌ decodeURI & ve = işaretlerini çözmez — değer bozuk kalır
const encodedFilter = 'status%3Dactive%26tier%3Dpremium%26region%3Deu-west'
const filter        = decodeURI(encodedFilter)
console.log(filter)
// 'status%3Dactive%26tier%3Dpremium%26region%3Deu-west'  ← %3D ve %26 çözülmedi
// ✅ decodeURIComponent & ve = dahil tüm dizileri çözer
const encodedFilter = 'status%3Dactive%26tier%3Dpremium%26region%3Deu-west'
const filter        = decodeURIComponent(encodedFilter)
console.log(filter)
// 'status=active&tier=premium&region=eu-west'  ← doğru çözüldü

Hata 4 — Kullanıcı girdisi için decodeURIComponent öğesini try/catch ile sarmamak

Sorun: İki onaltılık basamakla takip edilmeyen tek başına bir %— kullanıcıların yazdığı arama sorgularında yaygın (“%50 indirim”, “%100 pamuk”) — decodeURIComponent()'in URIError: URI malformed fırlatmasına neden olur ve yakalanmadan bırakılırsa istek işleyicisini çökertir. Düzeltme: girdi kullanıcı verilerinden, URL parçalarından veya harici sistemlerden geldiğinde her zaman try/catch ile sarın.

Before · JavaScript
After · JavaScript
// ❌ Kullanıcı arama kutusuna '%50 pamuk' yazdı — tek % sunucuyu çökertir
// GET /api/search?q=100%25+cotton  ← Bu özel durum tamam (%25 = %)
// GET /api/search?q=100%+cotton    ← Bu çöker (% 2 onaltılık basamakla takip edilmiyor)
app.get('/api/search', (req, res) => {
  const query = decodeURIComponent(req.query.q as string)
  // ↑ '100% pamuk' için URIError: URI malformed fırlatır → işlenmeyen 500 hatası
})
// ✅ try/catch ile sar — çözme başarısız olursa ham girdiye geri dön
app.get('/api/search', (req, res) => {
  let query: string
  try {
    query = decodeURIComponent(req.query.q as string)
  } catch {
    query = req.query.q as string  // çökmek yerine ham değeri kullan
  }
  // güvenle işlemeye devam et — query ya çözüldü ya ham kaldı
})

decodeURIComponent ve decodeURI ve URLSearchParams — Hızlı Karşılaştırma

Yöntem%XX çözer+ boşluk olarakHatalı biçimde fırlatır& = ? # çözerKullanım durumuKurulum gerektirir
decodeURIComponent()✅ tümü❌ hayır✅ URIError✅ evetBireysel değerler ve yol segmentleriNo
decodeURI()✅ çoğu❌ hayır✅ URIError❌ hayırTam URL dizeleriNo
URLSearchParams✅ tümü✅ evet❌ sessiz✅ evetOtomatik çözümle sorgu dizesi ayrıştırmaNo
URL yapıcısı✅ tümü✅ evet✅ TypeError✅ evetTam URL ayrıştırma ve normalleştirmeNo
decode-uri-component✅ tümü❌ hayır❌ sessiz✅ evetHatalı biçimli girdiye toleranslı toplu çözmenpm install
querystring.unescape()✅ tümü❌ hayır❌ sessiz✅ evetEski Node.js (v16'da kullanımdan kaldırıldı)No (yerleşik)

Vakaların büyük çoğunluğunda seçim üç senaryoya indirgenir. URLSearchParams'i sorgu dizelerini ayrıştırmak için kullanın — çözmeyi, +-boşluk kuralını ve tekrar eden anahtarları otomatik olarak işler. decodeURIComponent()'i ( try/catch'e sarılmış) tek bir değer veya yol segmenti için kullanın, özellikle segment içinde %2F kodlanmış eğik çizgiler beklediğinizde. decodeURI()'yi yalnızca yolunda ASCII dışı karakterler içeren tam bir URL diziniz olduğunda ve yapısal karakterlerin (/ ? & =) çıktıda kodlanmış kalması gerektiğinde kullanın.

Sıkça Sorulan Sorular

JavaScript'te decodeURIComponent() ile decodeURI() arasındaki fark nedir?
decodeURIComponent(), URL'de yapısal anlama sahip karakterler dahil dizideki her yüzde kodlanmış diziyi çözer — & (%26), = (%3D), ? (%3F), # (%23), / (%2F) ve : (%3A). Bireysel sorgu parametresi değerlerini veya yol segmentlerini çözmek için tasarlanmıştır. decodeURI() bu yapısal karakterleri korur — %26, %3D, %3F, %23, %2F veya %3A'yı çözmez — çünkü sorgu dizesi yapısını bozmadan tam bir URL'yi sanitize etmek için tasarlanmıştır. Kodlanmış & veya = içeren tek bir parametre değerinde decodeURI() kullanmak, bu dizileri sessizce çözülmeden bırakarak yanlış çıktı üretir.
decodeURIComponent() neden bazı dizeler için URIError fırlatır?
decodeURIComponent(), girdi tam olarak iki geçerli onaltılık basamakla takip edilmeyen bir % içerdiğinde URIError: URI malformed fırlatır. Yaygın tetikleyiciler: bir dizenin sonunda tek başına % ("kullanıcının yazdığı %50 indirim"), eksik dizi ("%A") veya onaltılık olmayan çift ("%GH"). Bu en sık kullanıcı tarafından yazılan arama sorguları veya hiçbir zaman URL kodlanması amaçlanmayan metinden yapıştırılan değerlerde olur. Düzeltme, decodeURIComponent()'i bir try/catch bloğu ile sarmak ve hata durumunda ham dizeyi döndürmektir. decode-uri-component npm paketi, try/catch sarmalayıcısı gerektirmeden aynı düzeltmeyi sunar.
URLSearchParams yüzde kodlanmış değerleri otomatik olarak çözer mi?
Evet. URLSearchParams.get() ve URLSearchParams.getAll() tarafından döndürülen her değer tamamen çözülmüştür — çıktılarına asla decodeURIComponent() çağırmamalısınız. URLSearchParams ayrıca application/x-www-form-urlencoded spesifikasyonunu takip eder, bu da + işaretini boşluk olarak çözer ve HTML form gönderimleri ile OAuth token yanıtları için doğru olur. URLSearchParams'ın yardımcı olamadığı tek durum, bir sorgu dizesinin parçası olmayan bağımsız kodlanmış bir değeri çözmektir — bunun için try/catch ile decodeURIComponent() kullanın.
JavaScript'te + işaretini boşluk olarak nasıl çözerim?
decodeURIComponent(), + işaretini gerçek artı işareti olarak işler — + işaretini boşluğa dönüştürmez. Bu kasıtlıdır: + işaretinin boşluk olarak kullanılması, yüzde kodlama standardından ayrı bir application/x-www-form-urlencoded kuralıdır. + işaretini boşluk olarak çözmek için, URLSearchParams (form kodlanmış spesifikasyonu takip eden) kullanın veya decodeURIComponent() çağırmadan önce + işaretini değiştirin: decodeURIComponent(str.replace(/\+/g, ' ')). + işaretini çözmeden önce %20 ile değiştirmek de çalışır ancak biraz daha ayrıntılıdır. Tam sorgu dizelerini ayrıştırırken her zaman URLSearchParams'ı tercih edin — hem %20 hem + işaretini doğru işler.
Node.js'te bir URL dizesini nasıl çözerim?
Tüm tarayıcılarda kullanılabilen global fonksiyonların aynısını kullanın — Node.js 10+'da import gerekmez. Bireysel değerler için decodeURIComponent(), tam URL dizeleri için decodeURI(), sorgu dizeleri için URLSearchParams. Gelen HTTP istek URL'leri için new URL(req.url, 'http://localhost') kullanın — URL yapıcısı URL'yi normalleştirir ve .searchParams (otomatik çözülmüş) ile .pathname (URL düzeyinde çözülmüş) öğelerini sunar. Eski querystring.unescape() fonksiyonu hâlâ mevcuttur ancak Node.js 16'dan beri kullanımdan kaldırılmıştır — bunun yerine decodeURIComponent() kullanın.
JavaScript'te URL sorgu dizesini nasıl nesneye ayrıştırırım?
Object.fromEntries() ile URLSearchParams kullanın: const params = Object.fromEntries(new URLSearchParams(queryString)). Bu, tüm parametre anahtarlarını ve çözülmüş değerleri içeren düz bir nesne döndürür. Object.fromEntries()'in yinelenen anahtarlar için yalnızca son değeri tuttuğunu unutmayın — tag=one&tag=two gibi tekrarlanan anahtarlar için URLSearchParams.getAll('tag') kullanın. Tarayıcıda new URLSearchParams(window.location.search), geçerli sayfanın sorgu dizesini otomatik olarak ayrıştırır. Node.js için new URL(req.url, base).searchParams'tan ayrıştırın.

İlgili Araçlar

Kod yazmadan tek tıklamayla çözme için yüzde kodlanmış dizenizi doğrudan ToolDeck'in URL Kod Çözücüsü içine yapıştırın — tarayıcıda anında çözer, sonuç kodunuza veya terminalinize kopyalamaya hazır.

AC
Alex ChenFront-end & Node.js Developer

Alex is a front-end and Node.js developer with extensive experience building web applications and developer tooling. He is passionate about web standards, browser APIs, and the JavaScript ecosystem. In his spare time he contributes to open-source projects and writes about modern JavaScript patterns, performance optimisation, and everything related to the web platform.

MW
Marcus WebbTeknik İnceleyici

Marcus specialises in JavaScript performance, build tooling, and the inner workings of the V8 engine. He has spent years profiling and optimising React applications, working on bundler configurations, and squeezing every millisecond out of critical rendering paths. He writes about Core Web Vitals, JavaScript memory management, and the tools developers reach for when performance really matters.