← Назад до курсу
← До курсу
JavaScript: змінні та типи даних

Рядки та шаблонні літерали

📖 Теорія

Рядки у JS можна створювати трьома способами:
'одинарні лапки'
"подвійні лапки"
шаблонний літерал — template literal

Шаблонні літерали (backtick) — найкращий вибір:

💡 Приклад коду
Вивід: 

                            

                                                                    

                

            
            
                            

                    

                        
📝 ЗАВДАННЯ (3)

                    

                    

                                                                                


                                
                                

                                                                            1.
                                                                        
Завдання 1: Шаблонні літерали

                                    10 XP
                                


                                
                                

                                    Оголоси змінні firstName = 'Іван', lastName = 'Петренко', year = 1995. Виведи рядок: 'Іван Петренко народився у 1995 році.'                                


                                
                                

                                    
                                


                                
                                                                    

                                        
                                        
                                    

                                
                                
                                

                                                                            
                                                                                                                
                                                                                                                
                                                                    


                                
                                                                    

                                        

                                            💡 Підказка: Використай template literal з ${}
                                        

                                    

                                
                                
                                                                    

                                        

                                            🔓 Розв'язок:
                                            
const firstName = 'Іван'; const lastName = 'Петренко'; const year = 1995;
console.log(`${firstName} ${lastName} народився у ${year} році.`);

                                        

                                    

                                
                                
                                

                                    

                                        Вивід:
                                    

                                    

                                


                                
                                
                                
                                


                                                                    

                                                            

                                                                                


                                
                                

                                                                            2.
                                                                        
Завдання 2: Конкатенація vs шаблони

                                    20 XP
                                


                                
                                

                                    Є змінні: product = 'ноутбук', price = 25000, discount = 0.1.

Виведи: 'Ноутбук зі знижкою 10% коштує 22500 грн.'                                


                                
                                

                                    
                                


                                
                                                                    

                                        
                                        
                                    

                                
                                
                                

                                                                            
                                                                                                                
                                                                                                                
                                                                    


                                
                                                                    

                                        

                                            💡 Підказка: Розрахуй finalPrice = price * (1 - discount) всередині ${} або окремо
                                        

                                    

                                
                                
                                                                    

                                        

                                            🔓 Розв'язок:
                                            
const product = 'ноутбук'; const price = 25000; const discount = 0.1;
const finalPrice = price * (1 - discount);
console.log(`${product.charAt(0).toUpperCase() + product.slice(1)} зі знижкою ${discount * 100}% коштує ${finalPrice} грн.`);

                                        

                                    

                                
                                
                                

                                    

                                        Вивід:
                                    

                                    

                                


                                
                                
                                
                                


                                                                    

                                                            

                                                                                


                                
                                

                                                                            3.
                                                                        
Завдання 3: Таблиця множення рядком

                                    30 XP
                                


                                
                                

                                    Виведи рядок: 'Таблиця 5:

5 x 1 = 5

5 x 2 = 10

5 x 3 = 15'                                


                                
                                

                                    
                                


                                
                                                                    

                                        
                                        
                                    

                                
                                
                                

                                                                            
                                                                                                                
                                                                                                                
                                                                    


                                
                                                                    

                                        

                                            💡 Підказка: Побудуй рядок з'єднанням через \n або через template literal з \n
                                        

                                    

                                
                                
                                                                    

                                        

                                            🔓 Розв'язок:
                                            
const n = 5;
console.log(`Таблиця ${n}:`);
console.log(`${n} x 1 = ${n * 1}`);
console.log(`${n} x 2 = ${n * 2}`);
console.log(`${n} x 3 = ${n * 3}`);

                                        

                                    

                                
                                
                                

                                    

                                        Вивід:
                                    

                                    

                                


                                
                                
                                
                                


                                                            

                                            

                

            
            
            

                                    
                        ← Попередній урок
                    
                
                                    
                        Наступний урок →