{"id":5530,"date":"2024-08-28T14:57:44","date_gmt":"2024-08-28T14:57:44","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\/"},"modified":"2024-08-28T14:57:47","modified_gmt":"2024-08-28T14:57:47","slug":"concatenation-en-javascript-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\/","title":{"rendered":"2.3 Concat\u00e9nation en JavaScript : Guide Pratique"},"content":{"rendered":"\n<p><strong>La concat\u00e9nation en JavaScript<\/strong> est un concept fondamental qui permet de combiner plusieurs cha\u00eenes de caract\u00e8res. Savoir comment utiliser la <strong>concat\u00e9nation en JavaScript<\/strong> peut enrichir vos applications web et am\u00e9liorer la manipulation des donn\u00e9es. Apprenons ensemble les diff\u00e9rentes mani\u00e8res d&rsquo;effectuer cette op\u00e9ration, avec des exemples de code pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Concat\u00e9nation en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658878289?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La concat\u00e9nation en JavaScript consiste \u00e0 joindre deux ou plusieurs cha\u00eenes de caract\u00e8res ensemble pour former une seule cha\u00eene. Il existe plusieurs m\u00e9thodes pour accomplir cette op\u00e9ration, allant de l&rsquo;utilisation de l&rsquo;op\u00e9rateur (+) aux fonctions d\u00e9di\u00e9es comme <code>concat()<\/code>. Examinons en d\u00e9tail ces diff\u00e9rentes m\u00e9thodes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;Op\u00e9rateur de Concat\u00e9nation (+)<\/h3>\n\n\n\n<p>L&rsquo;op\u00e9rateur (+) est le moyen le plus simple et le plus couramment utilis\u00e9 pour concat\u00e9ner des cha\u00eenes de caract\u00e8res en JavaScript. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let greeting = \"Bonjour, \";\nlet name = \"Alice\";\nlet message = greeting + name;\nconsole.log(message); \/\/ \"Bonjour, Alice\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">La M\u00e9thode <code>concat()<\/code><\/h3>\n\n\n\n<p>La m\u00e9thode <code>concat()<\/code> est une alternative \u00e0 l&rsquo;op\u00e9rateur de concat\u00e9nation (+). Elle peut \u00eatre utilis\u00e9e pour joindre plusieurs cha\u00eenes de caract\u00e8res ensemble :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let str1 = \"Bonjour, \";\nlet str2 = \"Alice\";\nlet str3 = str1.concat(str2);\nconsole.log(str3); \/\/ \"Bonjour, Alice\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concat\u00e9nation Avec les Litt\u00e9raux de Gabarits<\/h3>\n\n\n\n<p>Les litt\u00e9raux de gabarits (template literals) offrent une mani\u00e8re flexible et lisible de concat\u00e9ner des cha\u00eenes et d&rsquo;incorporer des expressions. Voici comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let name = \"Alice\";\nlet greeting = `Bonjour, ${name}!`;\nconsole.log(greeting); \/\/ \"Bonjour, Alice!\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concat\u00e9nation de Cha\u00eenes et de Variables<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement concat\u00e9ner des cha\u00eenes et des variables pour former des messages dynamiques. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let firstName = \"Alice\";\nlet lastName = \"Dupont\";\nlet fullName = \"Nom complet : \" + firstName + \" \" + lastName;\nconsole.log(fullName); \/\/ \"Nom complet : Alice Dupont\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concat\u00e9nation de Cha\u00eenes Cr\u00e9\u00e9es Dynamiquement<\/h3>\n\n\n\n<p>Il est souvent n\u00e9cessaire de concat\u00e9ner des cha\u00eenes g\u00e9n\u00e9r\u00e9es dynamiquement lors de l&rsquo;ex\u00e9cution du script. Par exemple, en utilisant des fonctions :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function greet(name) {\n  return \"Bonjour, \" + name + \"!\";\n}\nconsole.log(greet(\"Alice\")); \/\/ \"Bonjour, Alice!\"\nconsole.log(greet(\"Bob\")); \/\/ \"Bonjour, Bob!\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concat\u00e9nation de Cha\u00eenes et de Nombres<\/h3>\n\n\n\n<p>En JavaScript, vous pouvez \u00e9galement concat\u00e9ner des cha\u00eenes avec des nombres. Les nombres seront automatiquement convertis en cha\u00eenes de caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>let year = 2023;\nlet message = \"Cette ann\u00e9e est \" + year;\nconsole.log(message); \/\/ \"Cette ann\u00e9e est 2023\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concat\u00e9nation Avanc\u00e9e \u00e0 l&rsquo;Aide d&rsquo;une Fonction<\/h3>\n\n\n\n<p>Pour des besoins plus complexes, vous pouvez cr\u00e9er des fonctions sp\u00e9cifiques pour concat\u00e9ner des cha\u00eenes. Voici un exemple d&rsquo;une fonction qui prend un tableau de cha\u00eenes et les concat\u00e8ne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function concatenateStrings(stringsArray) {\n  return stringsArray.join(' ');\n}\n\nconst words = [\"Concat\u00e9nation\", \"de\", \"cha\u00eenes\", \"en\", \"JavaScript\"];\nconsole.log(concatenateStrings(words)); \/\/ \"Concat\u00e9nation de cha\u00eenes en JavaScript\"\n<\/code><\/pre>\n\n\n\n<p>En utilisant toutes ces m\u00e9thodes, vous pouvez ma\u00eetriser la concat\u00e9nation en JavaScript, enrichir vos applications et manipuler facilement les cha\u00eenes de caract\u00e8res.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>concat\u00e9nation en JavaScript<\/strong> est une technique essentielle pour la manipulation des cha\u00eenes de caract\u00e8res. Que vous utilisiez l&rsquo;op\u00e9rateur (+), la m\u00e9thode <code>concat()<\/code>, ou les litt\u00e9raux de gabarits, chaque m\u00e9thode a ses avantages pour diff\u00e9rentes situations. Explorez ces techniques dans vos projets pour rendre vos applications plus dynamiques et interactives. Pour un guide complet sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour des exemples plus avanc\u00e9s, explorez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-avanc%C3%A9\/148\">cours avanc\u00e9 de JavaScript<\/a>. Vous pouvez \u00e9galement en apprendre plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">qu&rsquo;est-ce que JavaScript ?<\/a> ou d\u00e9couvrir d&rsquo;autres <a href=\"https:\/\/wikiform.fr\/codespace\/log-logiciel-pour-javascript-meilleurs-outils\">logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<div>\n  <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">\n    <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript \u00e0 50% de r\u00e9duction\" title=\"\">\n  <\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>La concat\u00e9nation en JavaScript est un concept fondamental qui permet de combiner plusieurs cha\u00eenes de caract\u00e8res. Savoir comment utiliser la concat\u00e9nation en JavaScript peut enrichir&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5530"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5530\/revisions"}],"predecessor-version":[{"id":5531,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5530\/revisions\/5531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2860"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}