JavaScripti stringi meetodid selgitatud: substr vs substring vs slice (Parimad praktikad ja kaasaegne kasutamine)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus

JavaScript on veebiarenduse oluline programmeerimiskeel. Eriti kasutatakse stringide manipuleerimist sageli andmete vormindamiseks, analüüsimiseks ja kasutajaliidese dünaamiliseks värskendamiseks.
Selles artiklis selgitame üksikasjalikult kolme sageli kasutatavat JavaScripti stringimeetodit — substr, substring ja slice. Kuna need meetodid pakuvad sarnast funktsionaalsust, aitab nende erinevuste mõistmine valida õige meetodi igas olukorras.
Arutame ka, miks substr on vananenud, ning pakume alternatiivseid lähenemisviise, andes praktilisi nõuandeid JavaScripti kirjutamiseks vastavalt kaasaegsetele parimatele tavadele.

2. Iga meetodi põhiinfo ja kasutamine

See sektsioon selgitab substr, substring ja slice põhisisu ja kasutamist. Nende meetodite mõistmine aitab valida sobiva ning parandada koodi loetavust ja hooldatavust.

2.1 substr meetod

Syntax:

string.substr(start, length)

Description:

• start : Määrab aluse indeksi, kust alustada (0-põhine).
• length : Määrab, mitu märki välja võtta. Kui see jäetakse välja, jätkub võtmine stringi lõpuni.

Example Usage:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Note:
substr meetod on vananenud, ning soovitatav on seda tulevaste koodide puhul vältida. Kasuta selle asemel slice või substring.

Alternative Example (using slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 substring meetod

Syntax:

string.substring(start, end)

Description:

• start : Väljavõtmise algusindeks.
• end : Lõppindeks (selle indeksiga märki ei kaasata).

Example Usage:

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

Points:

1. Argumentide järjekord korrigeeritakse automaatselt: kui kutsud substring(10, 4), käsitletakse seda kui substring(4, 10).
2. Negatiivseid väärtusi ignoreeritakse: iga negatiivne argument käsitletakse kui 0.

Alternative example when negative values are needed (using slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 slice meetod

Syntax:

string.slice(start, end)

Description:

• start : Väljavõtmise algusindeks.
• end : Lõppindeks (selle indeksiga märki ei kaasata).

Example Usage:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Points:

1. Toetab negatiivseid väärtusi: negatiivsed indeksid loevad stringi lõpust.
2. Töötab nii stringide kui ka massiivide puhul: see võib ka massiividest elemente välja võtta, muutes selle väga mitmekülgseks.

3. Iga meetodi võrdlustabel

Choosing the Right Method by Use Case:

• Lühikeste segmentide väljavõtmine: → slice
• Kui on vaja negatiivseid väärtusi: → slice
• Vanema koodi ühilduvus: → Vältida substr; migreeri vastavalt vajadusele

4. Praktikalised koodinäited

Põhiline stringi manipuleerimine

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Väärtuste väljavõtmine mustri alusel

let url = "https://example.com/index.html";

// Get the file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Kuidas käsitleda vananenud meetodeid

JavaScripti substr meetod on vananenud. See on nii, sest substr on viimaste ECMAScripti spetsifikatsioonide kohaselt klassifitseeritud soovitamata meetodiks.
See sektsioon selgitab substr probleeme, alternatiivseid meetodeid ning kuidas oma koodi migreerida.

5.1 Miks on substr deprekeeritud?

1. Halb loetavus:

• substr kasutab teist argumenti kui “ekstraheeritavate märkide arv,”
  mis erineb teistest meetoditest, mis kasutavad lõppindeksit.
  See ebakõla muudab koodi raskemini mõistetavaks.

1. Võimalikud tulevased ühilduvusprobleemid spetsifikatsiooni muudatuste tõttu:

• Vanemad funktsioonid deprekeeritakse ECMAScripti standardiseerimise käigus.
  Uus kood ei tohiks neist sõltuda.

1. Negatiivsete väärtuste toetus puudub:

• substr ei toeta negatiivseid indekseid, samas slice teeb.

5.2 Kuidas migreerida kaasaegsetesse meetoditesse

Juhtum 1: Kindla pikkusega alamstringi ekstraheerimine

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // "Java"

// Recommended (slice)
console.log(str.slice(0, 4)); // "Java"

Juhtum 2: Stringi lõpu ekstraheerimine

// Deprecated code
console.log(str.substr(-6)); // Error (negative not supported)

// Recommended (slice)
console.log(str.slice(-6)); // "Script"

Juhtum 3: URL-i või failinime osa ekstraheerimine

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // "index.html"

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "index.html"

5.3 Refaktoriseerimise punktid vanas koodis

1. Tehke koodi skaneerimine:

• Kasutage tööriistu nagu ESLint, et tuvastada, kus substr on kasutatud.

1. Tugevdage testide katet:

• Kasutage üksusteste, et tagada käitumise õigsus pärast meetodite asendamist.

1. Migreerige järk-järgult:

• Prioriteerige asendamist olulistes või sageli käivitatavates osades.

5.4 substr-ist eemale liikumise eelised

1. Paranenud loetavus ja hooldatavus:

• Koodi eesmärk muutub selgemaks, parandades meeskonna arusaamist.

1. Ühilduvus kaasaegsete standarditega:

• ECMAScripti standardite järgimine tagab pikaajalise stabiilsuse.

1. Paindlik tugi negatiivsetele väärtustele:

• slice võimaldab lühikest ekstraheerimist nii algusest kui lõpust.

6. Korduma Kippuvad Küsimused (KKK)

See jaotis võtab kokku levinud küsimused ja vastused JavaScripti stringide manipuleerimise meetodite kohta.

K1: Kas ma võin ikka kasutada substr-i?

A:
Jah, enamik kaasaegseid brausereid toetab endiselt substr.
Kuid kuna ECMAScript märgib selle deprekeerituks, tuleks seda vältida uutes projektides või koodibaasides, mis nõuavad tulevast ühilduvust.
Soovitatav alternatiiv:

let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

K2: Mis on erinevus slice ja substring vahel?

A:
Allolev tabel võtab kokku nende erinevused:

Näited:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

K3: Millised on riskid jätkata deprekeeritud meetodite kasutamist?

A:

1. Võimalik brauseri toe eemaldamine: substr võib lõpuks olla toetamata.
2. Suurenenud hoolduskulud: Deprikeeritud funktsioonide silumine võtab lisaks aega.
3. Madalam koodikvaliteet: Kaasaegsete standardite eiramine vähendab loetavust.

K4: Milline meetod sobib kõige paremini pikkade stringide jaoks?

A:
slice on parim, kuna see toetab negatiivseid indekseid ja pakub suurt paindlikkust.
Näide:

let longText = "This is a very long text string used for testing purposes.";

// First 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

K5: Kuidas lugeda tagasi kasutades negatiivseid väärtusi?

A:
Kasutage slice, kuna substring käsitleb negatiivseid väärtusi kui 0.
Näide:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

// substring treats negative as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: Kas on jõudluserinevusi?

V: Kaasaegsed brauserid ei näita olulisi jõudluserinevusi slice, substring või substr vahel. Kuna kõik need on kohalikud funktsioonid, prioriteerige loetavust ja hooldatavust mikroomistamiste üle.

7. Kokkuvõte ja soovitatavad parimad praktikad

Selles artiklis uurisime JavaScripti stringimeetodeid substr, substring ja slice, katades nende baassüntaksi, erinevusi, praktilisi koodinäiteid ning aegunud meetodite migreerimisstrateegiaid. See jaotis reorganiseerib iga meetodi peamised omadused ja esitab soovitatavad kaasaegsed parimad praktikad.

7.1 Iga meetodi kokkuvõte

7.2 Praktilised valikukriteeriumid

1. Kasutage substring lihtsate vahemike ekstraktsiooniks:

• Parim, kui negatiivseid väärtusi pole vaja. Näide:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. Kasutage slice maksimaalse paindlikkuse jaoks:

• Toetab negatiivseid indeksid ja on eelistatud meetod uuele koodile. Näide:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Asendage substr niipea kui võimalik:

• Migreerige slice või substring juurde, kui hooldate vana koodi.

7.3 Kaasaegsed parimad praktikad

1. Kirjutage koodi loetavuse eesmärgil:

• Selge ja kokkuvõtlik kood parandab pikaajalist hooldatavust.

1. Vältige aegunud meetodeid:

• substr võib kaotada brauseritoe tulevastes uuendustes—migreerige varakult.

1. Kasutage slice negatiivsete väärtustega töötamisel:

• slice on ainus meetod, mis käsitleb negatiivseid indeksid õigesti.

1. Kasutage ESLint ja testikomplekte koodikvaliteedi säilitamiseks:

• Staatiline analüüs aitab tuvastada aegunud meetodeid ja jõustada kaasaegseid programmeerimistiile.

7.4 Näide kaasaegsest programmeerimistiilist

// Example: Extract domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Get file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Tegevusplaan lugejatele

1. Vaadake oma olemasolevat koodi üle:

• Kontrollige, kas teie projektis kasutatakse substr ja asendage see vajadusel.

1. Järgige parimaid praktikaid uues koodis:

• Kasutage kaasaegseid, paindlikke mustreid ja vältige aegunud funktsioone.

1. Kasutage kommentaare ja kogukonna küsimusi:

• Jagage küsimusi või kasutustingimusi, et aidata teisi õppida, samal ajal tugevdades oma arusaama.

Kokkuvõte

See artikkel andis põhjaliku selgituse JavaScripti substr, substring ja slice meetoditest, sealhulgas süntaksist, näidetest, võrdlustabelitest ning migreerimisstrateegiatest.

• Vältige substr, sest see on aegunud.
• Kasutage substring lihtsate stsenaariumide jaoks.
• Kasutage slice maksimaalse paindlikkuse ja kaasaegsete parimate praktikate jaoks.

Kasutage neid teadmisi efektiivse, hooldatava JavaScripti koodi kirjutamiseks.

8. Seotud lingid ja viited

Selleks, et süvendada oma arusaama substr, substring ja slice kohta, siin on kasulikud lingid ja viited. Ametlik dokumentatsioon ja õppematerjalid aitavad teil ajada kaasas viimaste JavaScripti uuenduste ja tehniliste küsimustega.

8.1 Ametlik dokumentatsioon

1. MDN Web Docs – JavaScript String Object

• Link: String – MDN Web Docs
• Ülevaade: Täielik viide JavaScripti String objektile detailsete spetsifikatsioonide ja näidetega.

1. ECMAScript Specification (ECMA-262)

• Link: ECMAScript Official Specification
• Ülevaade: Ametlik keelespetsifikatsioon, mis hõlmab uusimaid ECMAScripti funktsioone, vananenud meetodeid ja tehnilisi üksikasju.

8.2 Õppimisveebisaidid ja õpetused

1. JavaScript.info – Stringide manipuleerimise juhend

• Link: JavaScript.info
• Ülevaade: Ulatuslik juhend, mis käsitleb nii põhilisi kui ka edasijõudnud stringioperatsioone praktiliste näidetega.

1. Progate – JavaScript algajate kuni kesktaseme kursus

• Link: Progate
• Ülevaade: Interaktiivne platvorm, mis on ideaalne algajatele, kes õpivad praktiliste kodeerimisülesannete kaudu.

1. DotInstall – JavaScripti sissejuhatusõpetused

• Link: DotInstall
• Ülevaade: Lühikesed videolepingud, mis muudavad JavaScripti visuaalse ja kiire õppimise lihtsaks.

8.3 Praktilised näidiskoodi ressursid

1. GitHub – JavaScripti näidisprojektid

• Link: GitHub
• Ülevaade: Õpi parimaid tavasid ja reaalse maailma mustreid, uurides avatud lähtekoodiga projekte.

1. CodePen – Interaktiivne koodijagamine

• Link: CodePen
• Ülevaade: Jaga ja testi oma koodi teiste arendajatega või sirvi näiteid inspiratsiooni saamiseks.

8.4 Soovitatud raamatud

1. JavaScript: The Definitive Guide (7th Edition)

• Ülevaade: Ulatuslik, autoriteetne viide, mis hõlmab JavaScripti alusest kuni edasijõudnud funktsioonideni.

1. Mastering Modern JavaScript – Revised Edition

• Ülevaade: Praktiline viide, mis keskendub kaasaegsele JavaScriptile ja ajakohastele kodeerimisstandarditele.

8.5 Kogukond ja foorumid

1. Stack Overflow (Jaapani)

• Link: Stack Overflow
• Ülevaade: Küsimuste ja vastuste kogukond, kus saate JavaScripti probleeme tõhusalt lahendada.

1. Qiita

• Link: Qiita
• Ülevaade: Jaapani platvorm, mis on rikkalik praktiliste artiklite ja JavaScripti juhtumiuuringutega.

1. Teratail

• Link: Teratail
• Ülevaade: Jaapani Q&A sait, mis on ideaalne tehniliste küsimuste esitamiseks emakeeles.

Kokkuvõte

See sektsioon tutvustas laia valikut ressursse — ametlikest viidetest kuni õpetusteni, näidiskoodide repositooriumiteni ja kogukondade platvormideni — et toetada JavaScripti stringioperatsioonide pidevat õppimist.
Olulised järeldused:

1. Kontrolli ametlikku dokumentatsiooni regulaarselt:

• Veendu, et sinu koodistiil oleks kooskõlas uusimate standarditega.

1. Tugevda oskusi praktilise kodeerimise kaudu:

• Harjutamine muudab kontseptsioonid selgemaks ja parandab reaalse maailma rakendamist.

1. Osale kogukonnas:

• Küsimuste ja lahenduste jagamine aitab süvendada arusaamist ja laiendada oma võrgustikku.