Strings vars and literals

🎓 Методы работы со строками

📁 Операции со строками

• +

📁 Методы строк

• indexOf()
• slice()
• substring()
• substr()
• toLowerCase()
• toUpperCase()
• split()
• trim()
• charAt()
• charCodeAt()
• repeat()
• replace()
• padStart & padEnd

📁 Дополнительно

• String.fromCharCode()

---

Переменные в литералах

❗ Литерал строки заворачивается в символы обратных кавычек ( ` )

Литерал может содержать многострочный текст,

т.е. в литерал можно вставлять символ перевода строки

☕ 1️⃣

var str = "\nПривет,\nменя зовут Дима\n"

var lit = `
    Привет,
    меня зовут Дима

`

console.log ( str )
console.log ( lit )
console.log ( str.charCodeAt (0) )
console.log ( lit.charCodeAt (0) )

Результат в консоли:

10 - это код символа перевода строки

Обратите внимание, что в обычной строке ( str ) нам пришлось вставлять перевод строки с помощью \n

В литерале ( lit ) мы просто набираем многострочный текст, что улучшает читабельность кода

Но это не все достоинства литерала

---

Конструкция ${ имя_переменной } позволяет вставлять значения переменных непосредственно в литерал строки

☕ 2️⃣

var cities = [ "Неаполь", "Вашингтон", "Женева" ]

for ( var i = 0; i < cities.length; i++ ) {
    console.log (
        `${ i + 1 }: ${ cities [ i ] }`
    )
}

Результат в консоли:

1: Неаполь
2: Вашингтон
3: Женева

---

Можно использовать выражения, значения которых будут вычислены и вставлены в литерал:

☕ 3️⃣

var cities = [
    "Киев",
    "Львов",
    "Харьков",
    "Одесса",
    "Днепропетровск"
]

var str = ""

for ( var x = 0; x < cities.length; x++ ) {
    str += `${cities[x].charCodeAt(0)}: ${cities[x]}\n`
}

console.log ( str )

Результат в консоли:

---

☕ 4️⃣

Можно сгенерировать случайное значение цвета в шестнадцатеричном формате

Используем встроенную библиотеку математических функций Math

Для получения случайного числа от нуля до единицы используем функцию Math.random()

Значение цвета в каждом канале может быть от 0 до 255

Чтобы получить число в это диапазоне, умножим случайное число на 255

Значение цветового канала должно быть целым числом, поэтому округлим результат с помощью функции Math.round()

var red = Math.round ( Math.random() * 255 ).toString(16)
var green = Math.round ( Math.random() * 255 ).toString(16)
var blue = Math.round ( Math.random() * 255 ).toString(16)

var color = `#${red}${green}${blue}`

Теперь в переменной color будет строка, содержащая значение цвета в шестнадцатеричном формате

---

☕ 5️⃣

Можно сгенерировать случайное значение цвета с использованием функции rgb()

var red = Math.round ( Math.random() * 255 )
var green = Math.round ( Math.random() * 255 )
var blue = Math.round ( Math.random() * 255 )

var color = `rgb(${red},${green},${blue})`

Теперь в переменной color будет строка, содержащая значение цвета в модели rgb с десятичными значениями цвета в каналах

---

💼 Тесты

---

🔗 MDN	🔗 String Methods	🔗 String Reference