-
Notifications
You must be signed in to change notification settings - Fork 0
/
aula29.html
234 lines (184 loc) · 6.28 KB
/
aula29.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aula 29 - String</title>
<link rel="stylesheet" href="./src/css/style.css" />
</head>
<body>
<button id="menu-btn">X</button>
<nav id="menu">
<ul id="menu-ul"></ul>
</nav>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<main>
<article>
<h2>Aula 29 - String</h2>
<p>
Vamos aprender algumas propriedades e métodos de String, caso queira
aprender mais métodos de string,
<a
href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String#M%C3%A9todos"
>clique aqui.</a
>
</p>
<h3>Concatenando strings com com `</h3>
<p>Já vimos como concatenar strings com aspas e aspas duplas:</p>
<pre>
<code>
let nome = "Douglas";
console.log("Olá " + nome + ", bem-vindo!");
console.log('Oi ' + nome + ', bem-vindo!');
</code>
</pre>
<p>
Porém também podemos declarar strings com acento agudo: `Uma String`.
Mas para concatenar strings desse tipo com variáveis, é um pouco
diferente. Veja o exemplo:
</p>
<pre>
<code>
let nome = "Douglas";
console.log(`Olá ${nome}, bem-vindo!`);
</code>
</pre>
<h3>Strings como Arrays</h3>
<p>
String é uma cadeia de caracteres, portanto podemos pensar nela como
um array de caracteres. De fato strings possuem propriedades
semelhantes aos arrays. Vamos ver algumas delas agora:
</p>
<h4>length</h4>
<p>
Assim como arrays, strings possuem a propriedade
<strong>length</strong> que retorna a quantidade de caracteres da
string. Veja o exemplo:
</p>
<pre>
<code>
"Olá".length;
"Olá Douglas".length;
" ".length;
"".length;
" Oi ".length;
</code>
</pre>
<h4>Acessando caracteres</h4>
<p>
Assim como podemos acesar um elemento de um array, podemos acessar um
caracter de uma string, veja o exemplo:
</p>
<pre>
<code>
let nome = "Douglas Mariano Valero";
nome[0];
nome[1];
nome[7];
nome[14];
</code>
</pre>
<p>
Porém diferente de arrays, não podemos mudar um caractere de uma
string diretamente, veja o exemplo:
</p>
<pre>
<code>
let nome = "Carina";
nome[0] = "K"; //não funciona
console.log(nome);
</code>
</pre>
<h4>Split e Join</h4>
<p>
Como strings são semelhantes a um array, podemos transformá-las em
arrays e depois transformar de volta para strings. A utilidade disso é
que assim podemos usar alguns métodos exclusivos de arrays nas strings
convertidas e depois convertê-las de volta para string.
</p>
<p>
O método split() recebe um separador como parâmetro e retorna um array
com as substrings separadas. Caso queira separar caracter por caracter
use o separador vazio "". Veja o exemplo:
</p>
<pre>
<code>
let nome = "Douglas Mariano Valero";
let arrNome = nome.split(" ");
console.log(arr);
let texto = "Olá Mundo";
ler arrTexto texto.split("");
console.log(arrTexto);
</code>
</pre>
<p>
O método join() junta um array de strings, usando um separador, e
retorna uma única string. Veja o exemplo:
</p>
<pre>
<code>
let arr = ["Douglas", "Mariano", "Valero"];
let nome = arr.join(" ");
console.log(nome);
</code>
</pre>
<h3>toLowerCase() e toUpperCase()</h3>
<p>
O método toLowerCase() transforma uma string toda para letras
minúsculas. E o método toUpperCase() para letras maiúsculas.
</p>
<pre>
<code>
let nome = "Douglas";
nome = nome.toLowerCase();
console.log(nome);
nome = nome.toUpperCase();
console.log(nome);
</code>
</pre>
<h3>indexOf()</h3>
<p>
O método indexOf() é usado para procurar uma substring dentro de uma
string. Ele retorna -1 caso não encontre a substring, ou retorna a
posição inicial a qual foi encontrada a substring. Veja os exemplos.
</p>
<pre>
<code>
let nome = "Douglas Mariano Valero";
nome.indexOf("Mariano");
nome.indexOf("Silva");
nome.indexOf("v");
nome.indexOf("V");
nome.indexOf(" ");
nome.indexOf("w");
if(nome.indexOf("Valero") != -1){
console.log("Faz parte da família Valero!")
}
</code>
</pre>
<h3>substring()</h3>
<p>
O método substring() retorna uma substring de uma string. Esse método
recebe dois parâmetros, o primeiro é o índice do primeiro caractere, e
o segundo é o último caractere (não incluindo), veja o exemplo:
</p>
<pre>
<code>
let nome = "Douglas Mariano Valero";
let primeiroNome = nome.substring(0, 7);
console.log(primeiroNome);
</code>
</pre>
<h3>Exercício</h3>
<h4>Espaços para Hífens</h4>
<p>
Crie um script que recebe uma string e troca todos espaços por hífens,
e depois mostra a string na tela.
</p>
</article>
</main>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<script src="./src/js/menu.js"></script>
</body>
</html>