Le stringhe in JavaScript

In questo video parleremo delle stringhe in JavaScript.
Le stringhe sono una sequenza di caratteri alfanumerici e sono presenti in tutti i linguaggi di programmazione, però ognuno di essi le maneggia in maniera diversa.
In questo video vedremo come creare una stringa e inserirla in una variabile. Possiamo crearla con i doppi apici o il singolo apice oppure con una nuova maniera introdotta dall'ECMAScript 6: i back tick, e vedremo anche che differenza c'è nell'usare le prime due tecniche in confronto con la terza.
Poi parleremo: di come concatenare stringhe, di come andare a capo, di come inserire valori unicode e codice HTML. Vedremo anche come maneggiare una stringa come se fosse una specie di array.
Infine, parleremo dell'oggetto String e di alcuni metodi molto utili che sono built-in come: toUpperCase() e trim().

Trascrizione: (click per espandere)
salve a tutti e benvenuti in questo
video parlerò delle stringhe di
javascript
come ho detto nel video precedenti una
stringa composta da una serie di
caratteri alfanumerici ed è un valore di
tipo primitivo fino adesso io ho sempre
fatto vedere che scrivevo le stringhe
aprendo e chiudendo gli apici ma la
stessa cosa può essere usata fatta
usando le virgolette non cambia nulla
con ECMAScript 6 è stato introdotto
un'altra maniera per creare stringhe
adesso la faccio vedere eccola qui è
usando i back tick come in questo caso
ad usare la bici virgolette non cambia
nulla usare back stick cambia qualcosa
anzi migliora sicuramente l'uso delle
stringhe adesso andremo a vedere qualche
esempio per farvi capire che differenze
ci sono
come si fa a capo con le stringhe allora
stringa anzi queste qua facciamo così
stringa
diciamo che io questa stringa molto
lunga
come vedete il mio editor di testo ma
bene o male tutti quanti mette una linea
verticale qui che va di che rappresenta
un limite che si potrà tranquillamente
superare non succede nulla però è un
limite che dice allo sviluppatore cerca
di non scrivere istruzioni troppo lunghe
altrimenti rovini la leggibilità del tuo
codice
quindi diciamo che io devo scrivere
questa stringa che così lunga e superò
questa linea cosa voglio fare
voglio dire a javascript guarda che la
stringa che sto scrivendo qui la
continua nella seconda linea
come posso fare per fare questo
inserisco questo back slash e poi vado a
capo tranquillamente e se adesso io vado
a vedere il suo output
ecco qui stringa 1 quale avrò la mia
linea è la mia stringa tutta
visualizzata in una linea ho solo detto
a javascript e guarda che la seconda
parte e nella seconda linea ma non non
sto dicendo al browser guarda che qui ho
un accapo un'altra maniera per fare
questo è usando l'operatore di
concatenazione che avevo già fatto
vedere che è rappresentato dal simbolo
più ecco qui se io vado a visualizzare
visualizzare la stringa nulla cambia
cosa succede se io uso i back stick usando i back stick
che io non ho bisogno né di back slash ne di
operatore di concatenazione
ecco qui io uso solo i back stick qui
non aggiungo niente però javascript
capisce che la seconda riga fa parte
della stessa stringa e qui il mio
risultato se io voglio inserire dei tag
html in una stringa come
posso fare
ecco qui nessun problema posso scrivere
questa stringa html e qui posso possono
metterci dentro un tag html come la capo
html ecco qui quando questa stringa
visualizzata da browser e browser legge
il mio tag html e lo interpreta e qui
vado una capo
volendo io qui possono mettere un altro
tipo di tag si possono usare qualsiasi
tipo di targa non c'è nessun problema
nessun problema è il browser e li
capisce tranquillamente per esempio qui
adesso io ho creato un una parola in
grassetto usando il tag bold e quindi
dentro le stringhe si poo' inserire
qualsiasi tipo di tag html cosa succede
se io voglio aggiungere un altro pezzo a
questa stringa come ho detto prima si
usa l'operatore di concatenazioni e lo
faccio faccio vedere la scorciatoia
anzi stringa 1 e ci aggiungo una seconda
parte ecco qui lo spazio
ecco qui ho aggiunto la seconda parte
alla stessa stringa usando l'operatore
del concatenazione e la versione
scorciatoia cosa succede se io sto
scrivendo una stringa usando gli apici e
all'interno della stringa voglio usare
un apice andiamo a vedere allora
riprendo questo che faccio prima
no l'ho preso male e lo riscrivo stringa
1
apro gli apici per scrivere la stringa voglio
scrivere è
e arrivata l'estate quindi scrivo e poi
metto l'apostolo arrivata l apostrofo
estate come vedete atom sta facendo
casino dice che c'è qualcosa che non va
questo perché quando io inserisco e
l'apostrofo che è un apice praticamente
sto dicendo javascript aprì la stringa qui e
chiudi la stringa qui è tutta questa
roba qui diventa confusione per
javascript e per atom anche come può
quindi come posso fare per dire guarda
che questo apice fa parte della stringa
e non vuol dire chiudi la stringa si
mette il back slash tengo qui e stessa
cosa per questo apc qui e poi chiudo con
l'apice ecco in questa maniera io sto
dicendo guarda che questi due a pc
all'interno della stringa fanno parte
della stringa stessa se adesso noi
andiamo a visualizzare la stringa come
vedete i due api ci sono interpretati
correttamente stessa cosa è se io avessi
usato le virgolette per aprire e
chiudere la stringa e avessi voluto
usare le virgolette al suo interno
se invece io sto usando gli apici per la
stringa e voglio usare le virgolette al
suo interno non c'è nessun problema
perché è la stringa è visualizzata
usando è creata usando gli apici infatti
io qui posso mettere tranquillamente le
virgolette senza fare l'escape se voglio
inserire il un back slash dentro la
stringa come parte della stringa anche
anche in questo caso devo fare l'escape
del back slash
ed eccolo qui quindi il primo back slash
e' l'escape per il secondo back slash e il
secondo back slash è inserito dentro la
stringa una stringa può essere vista
anche come un array vedremo più avanti
quando faremo gli array
nello specifico come funziona ma vi
faccio solo vedere cosa vuol dire per
esempio
cominciamo a stampare qualcosa ecco qui
facciamo una roba un po più semplice
mettiamo solo ciao e usiamo il console
log
adesso se io voglio sapere se io adesso
voglio sapere quanti caratteri
compongono la mia stringa usa
la proprietà length questa proprietà mi
dice la lunghezza della stringa se
adesso vado a vedere mi dice 4 perché io
sto usando quattro caratteri se avessi
per esempio in questo caso
ciao ciao avrei 9, 9 perché ho quattro
caratteri poi uno spazio vuoto che
contato con un carattere e poi c'è
ancora quattro caratteri possono anche
chiedere a javascript di
visualizzarmi il carattere in una
specifica posizione ad esempio io voglio
dire voglio il carattere che si trova
nella prima posizione della stringa e
devo passare l'indice del carattere
dentro alle parentesi quadrate per gli
array ma anche per le stringhe si
comincia a contare con lo zero quindi la
ci e' imposizione 0 la i è in posizione 1
la a in due e via così quindi se io
voglio visualizzare il primo carattere
qui devo mettere 0 e vedrò la c se io
voglio visualizzare la a sarà 0 1 2 sarà il
carattere all'indice numero 2 e ciò la
cosa succede se io voglio visualizzare
il carattere al posto 112 per esempio la
stringa non è lunga 112 caratteri quindi
io avrò indefinito perché javascript
dice io non so non ho un valore per quel
carattere e ti do indefinito come si
inseriscono le variabili in una stringa
per esempio io ho una variabile 1 ed è
un numero 4 poi c'è un'altra variabile
che si chiama 2 e ciò la stringa
anzi qui mettiamo uno visto che avevamo
messo il nome 1
e poi c'è la stringa commettiamo questo
stringa 1 la chiamiamo cominciamo a
scrivere la stringa 1 ecco qui quando io
voglio inserire una variabile del valore
di una variabile dentro una stringa devo
aprire e scrivere la mia stringa
quello che voglio che sia inserito nella
stringa poi chiudere la stringa simbolo
di concatenazione nome della variabile
sarà se io voglio continuare a scrivere
simbolo di concatenazione riapro la
stringa e metto la variabile 2 richiudo
la richiude la stringa simbolo di
concatenazione nome della variabile se
adesso io vado a fare il printing eccomi
qua
qui ho la variabile 1 e o il valore
della prima variabile la variabile 2 o
il valore della seconda variabile
se invece di usare gli apici o le
virgolette uso back tick cosa succede
andiamo subito a vedere
allora io qua tiro via l'apice e ci metto il
back tic qui tiro via qui tiro via è un
uso segno del dollaro e parentesi
graffe parentesi graffe
del dollaro parentesi graffe parentesi
graffe si chiude back tick ho lo stesso
identico risultato scrivendo meno ed
anche più leggibile praticamente quando
si usa nei back tic per inserire le
variabili all'interno di una stringa non
serve più chiudere la stringa e usare il
simbolo di concatenazione basta usare il
segno del dollaro aprire le le parentesi
graffe e inserire il nome della
variabile al loro interno dentro a una
variabile io posso inserire anche una
stringa stringa con un valore di unico
andiamo a vedere per esempio
ciao e per inserire l'unicode io faccia
back slash u e il valore unico del per
esempio in questo caso posso mettere
questo se adesso vado a fare il printing
io avrò la mia il mio valore della
stringa con è l'unicode convertito
posso usare qualsiasi tipo di unicode non
c'è problema stringhe l'oggetto stringa
al suo interno si dice built in
javascript era già un oggetto chiamato
stringa eccolo qui stringa io posso
usare questo oggetto per convertire una
variabile di un tipo non stringa in una
stringa andiamo a vedere un esempio let
numero per esempio qui io metto un
numero e se vi ricordate per vedere il
tipo del tipo di variabile posso usare
l'operatore typeof eccolo qui e io ho un
numero se adesso io vado a dire uguale
cosa succede io sto con usando l'oggetto
string per convertire il numero in una
stringa quindi se adesso vado a vedere
che tipo di variabile ho qui lui mi dice
stringa consiglio vivamente di usare
l'oggetto stringa solo in questa maniera
qui perché se si usa è alloggiato
stringa con la keyword new davanti
vedremo quando faremo gli oggetti cosa
vuol dire la keyword new ma se io voglio
creare una stringa per esempio new
stringa e è uso l'oggetto stringa con la
keyword e qui ci metto dentro lo stesso
identico numero di prima e poi vado a
vedere che tipo di variabile ho creato
ho creato questo qua è new stringa ho
creato un oggetto cioè se io uso
l'oggeto stringa con la keyword avanti
non creo più una stringa crea un oggetto
quindi non ci sono casi normalmente non
ci sono casi in cui serve usare
l'oggetto stringa con la keyword new
quindi io vi sconsiglio di usarla e
usate la sola in questa maniera qui
altra maniera per convertire un oggetto
una variabile per esempio una variabile
numero in una stringa è usando degli
apici davanti e poi concatenando il nome
della variabile se adesso vado a vedere
che tipo di variabili o creato ecco qui
c'è una variabile stringa non ci sono
differenze tra usare questo è questo
metodo e io preferisco usare questo
perché è un po più descrittivo perché
usando la parola stringhe sto dicendo a
un'eventuale
lettore nel mio codice sto convertendo
una variabile in una stringa ma voi
potete usare tranquillamente che questo
non c'è nessun problema ci sono
moltissimi tipi di funzioni per usare
che possono essere usate con le stringhe
ne faccio vedere un paio poi vi metterò
un paio di linking descrizione dove
potete trovare tutte le funzioni che
volete e potete dare una letta giusto
per avere un'idea di quello che si può
fare dunque andiamo a vedere per esempio
adesso io dichiaro questa variabile
upper case e crea questa variabile
tutta upper case e la voglio convertire in
lower case posso usare il metodo to
lower case e converto lettere
maiuscole in lettere minuscole
come esiste to lower case esiste
anche to upper case per fare il
contrario
altro veloce funzione che
posso mostrarvi il trim
per esempio creare questa variabile trim
e qui ci metto spazio vuoto spazio vuoto
se adesso io vado a vedere la proprietà
vedere la lunghezza di questa variabile
mi troverò 15 caratteri
però io lo spazio vuoto all'inizio e
spazio alla fine cosa succede se io
faccio così vado a usare la funzione
trim che mi che mi togli caratteri vuoti
all'inizio e alla fine della stringa
ecco qui e adesso mio 4
se avessi caratteri vuoti in mezzo alla
stringa come in questo caso lui continua
a tirarmi via solo i caratterei all'inizio e
alla fine
come vi ho detto vi metto 2 link in
descrizione e così potrebbero trovare
tutte le full i metodi che possono
essere usati con le stringhe
dateci una letta non serve che li
imparati a memoria ma giusto per avere
un'idea di quello che si può fare poi in
un futuro quando starete lavorando con
le stringhe di serve
una funzione per operare una certa
maniera sapete che esiste una funzione
apposita ve la andate a vedere vi
studiate come si usa e potete applicarla
con questo è tutto ci vediamo il
prossimo video ciao
File del video: