JavaScript Crash Course

Методи для роботи з рядками

7

$ whoami

Інна Іващук

Senior Software Engineer

JS developer, music fan, movie-dependent and Star Wars fan 🤓

May the Force be with you!

5 років із GlobalLogic

приблизно 7 років у веб-розробці

        GitHub page

Зміст:

  1. Конкатенація рядків
  2. Template strings
  3. Методи для роботи з рядками

Конкатенація рядків

Дані рядкового типу

  • "My awesome string"
  • "my.mail@gmail.com"
  • "random1819string"
  • 'string in single quotes'
  • 'a'

Конкатенація або об'єднання рядків

const user = {
  firstName: 'Steven',
  lastName: 'Spielberg',
};

const helloStr = 'Hello, ' + user.firstName + ' ' + user.lastName + '!';

console.log(helloStr);
// output: "Hello, Steven Spielberg!";

Формування персоналізованого повідомлення

Конкатенація рядка із іншим типом даних

const director = {
  firstName: 'Steven',
  lastName: 'Spielberg',
  movies: 57,
};

const info = 'As a Director ' + director.firstName
	+ ' ' + director.lastName + ' created ' + 
    + director.movies + ' movies';

console.log(info);
// output: "As a Director, Steven Spielberg created 57 movies";

Формування  повідомлення з лічильником

Конкатенація рядка із числовим значенням

const result = 2000 + ' line of JavaScript code';

console.log(result);
// Output: '2000 line of JavaScript code'


const interestingResult = '4' + 8 - 6;

console.log(interestingResult);

Як вважаєте, яким буде результат?

Результатом буде - числове значення 42

Конкатенація рядка із іншим типом даних

const result = "Don't do it in real life " + {};

console.log(result);
// Output: "Don't do it in real life [object Object]"

Не повторювати в реальному житті :) 

Template string

Template literals (Template strings)

const lines = 2000;
const result = `${lines} lines of JavaScript code`;

console.log(result);
// Output: '2000 lines of JavaScript code'

Два нюанса у використанні:

- потрібно використовувати - ``

- для вставки змінної - ${myVar}

Template literals (Template strings)

const lines = 2000;
const language = 'JavaScript';

const result = `${lines} lines of ${language} code`;

console.log(result);
// Output: '2000 lines of JavaScript code'

Можна також підставляти декілька змінних

Template literals (Template strings)

const lines = 2000;
const language = 'JavaScript';

const result = `${lines > 0 ? lines: 'Zero'} lines of ${language} code`;

console.log(result);
// Output: '2000 lines of JavaScript code'

А також використовувати тернарний оператор

Методи для роботи з рядками

Складові і використання метода

const myStr = 'Me awesome string';

myStr.split(' ');

потрібний метод

необхідні аргументи метода

назва змінної рядкового типу

Метод charAt для роботи з рядками

const sentence = 'The quick brown fox jumps over the lazy dog.';

const index = 4;
const char = sentence.charAt(index);

console.log('The character at index 4 is ', char);
// output: "The character at index 4 is q"

Знаходження символа в рядку по індексу

Метод includes для роботи з рядками

const sentence = 'The quick brown fox jumps over the lazy dog.';

const word = 'fox';
const hasWord = sentence.includes(word); // true

console.log(`The word "${word}"
	${hasWord ? 'is' : 'is not'} in the sentence`);
// output: "The word "fox" is in the sentence"

const hasCatWord = sentence.includes('cat'); // false

Знаходження тексту в рядку

Метод indexOf для роботи з рядками

const beasts = 'Beasts list: ant, bison, camel, duck, lion';

console.log(beasts.indexOf('bison'));
// output: 18

console.log(beasts.indexOf('tiger'));
// output: -1

Перевірка на наявність елемента в рядку

Метод toLowerCase для роботи з рядками

const sentence = 'AWESOME STRING';

const changed = sentence.toLowerCase();

console.log(changed);
// output: "awesome string"

Приведення до нижнього регістру тексту в рядку

Метод toUpperCase для роботи з рядками

const sentence = 'lotr';

const changed = sentence.toUpperCase();

console.log(changed);
// output: 'LOTR'

Приведення до верхнього регістру тексту в рядку

Метод slice для роботи з рядками

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// output: "the lazy dog."

console.log(str.slice(4, 19));
// output: "quick brown fox"

console.log(str.slice(-4));
// output: "dog."

console.log(str.slice(-9, -5));
// output: "lazy"

Отримання частини рядка

Метод split для роботи з рядками

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// output:
// ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']

Перетворення рядка в масив

Метод match для роботи з рядками

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// output: Array ["T", "I"]

Знаходження елементів, які відповідають певному патерну

Метод replace для роботи з рядками

const p = 'The quick brown fox jumps over the lazy dog';

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey."


const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret."

Заміна елементів, які відповідають певному патерну

Метод trim для роботи з рядками

const greeting = '   Hello world!   ';

console.log(greeting);
// output: "   Hello world!   ";

console.log(greeting.trim());
// output: "Hello world!";

Видалення пробілів на початку і в кінці рядка

Q & A

9 JavaScript Crash Course

By Inna Ivashchuk

9 JavaScript Crash Course

  • 507

More from Inna Ivashchuk