Przejdź do głównej zawartości

Bug #022

🪲 Znajdź buga​

const html = "
<h1>Hello World!</h1>
<p>JavaScript is awesome!</p>
"

document.body
  .insertAdjacentHTML("afterbegin", html)

Chcemy dodać zaraz na początku strony kod HTML za pomocą JavaScript. Czy powyższy kod nam to umożliwi?

🧪 Rozwiązanie​

const html = `
<h1>Hello World!</h1>
<p>JavaScript is awesome!</p>
`

document.body
  .insertAdjacentHTML("afterbegin", html)

Przykład z błędem nie wykona poprawnie postawionego zadania. Powodem jest nie domknięcie cudzysłowu (bez znaczenia czy użyjemy pojedynczego czy podwójnego).

W kodzie jednak może nam się wydawać, że cudzysłów domykamy. Robimy to jednak nie w tej samej linii, w której go otworzyliśmy, a na to JavaScript już nie pozwala.

Mamy 2 możliwości naprawienia tego błędu.

Pierwszą z nich jest uniknięcie (escape) przejścia do nowej linii poprzez wstawienie wstecznego ukośnika (backslash \).

Backslash spowoduje, że biały znak przejścia do nowej linii zostanie "wyeskejpowany", czyli nie zostanie potraktowany jako znak kończący kod w danej linii, więc i nie wywoła błędu o niedomkniętym cudzysłowu.

\ musimy jednak wstawić na końcu każdej linii, w której przechodzimy do nowej linii wewnątrz cudzysłowów (1, 2, 3 linia).

Znacznie wygodniejszym rozwiązaniem będzie użycie Template literals (Template strings).

Zamiast używać cudzysłowu (" lub ') używamy grawisu (backtick `).

Możemy wtedy kompletnie pominąć \ na końcach wierszy i swobodnie przenosić kod do nowych linii.

Template literals ma jednak pewną istotną implikację. Kod HTML będzie preformatowany. Jeśli sprawdzimy źródło kodu w przeglądarce, zobaczymy, że wszystkie białe znaki będą zachowane, podobnie jakbyśmy kod zawarli w znacznikach <pre>.

🎢 Plac zabaw​

Otwórz edytor w nowym oknie

📑 Linki​

❤️ Podobają Ci się bugi JS?​

Podziel się linkiem ze znajomymi:
https://codisity.pl/100-bugow-js