{"id":5560,"date":"2024-08-28T22:24:38","date_gmt":"2024-08-28T22:24:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/convertir-donnees-en-javascript-tutoriel\/"},"modified":"2024-08-28T22:24:41","modified_gmt":"2024-08-28T22:24:41","slug":"convertir-donnees-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/convertir-donnees-en-javascript-tutoriel\/","title":{"rendered":"4.9 Convertir Donn\u00e9es en JavaScript : Tutoriel"},"content":{"rendered":"\n<p><strong>Convertir Donn\u00e9es JavaScript<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec ce langage. Ma\u00eetriser la conversion des donn\u00e9es permet d&rsquo;optimiser la gestion des informations et d&rsquo;am\u00e9liorer les performances des applications web. Dans ce tutoriel, nous verrons comment convertir diff\u00e9rents types de donn\u00e9es en JavaScript gr\u00e2ce \u00e0 des exemples concrets et pertinents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Conversion de Donn\u00e9es en JavaScript<\/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\/658879426?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 conversion de donn\u00e9es en JavaScript implique le changement du type de donn\u00e9es d\u2019une variable \u00e0 un autre. Cette pratique est fondamentale lors de l\u2019interaction avec des API, de la manipulation des formulaires ou encore de la comparaison de valeurs. Voici comment vous pouvez proc\u00e9der :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Convertir des Cha\u00eenes de Caract\u00e8res en Nombres<\/h3>\n\n\n\n<p>JavaScript fournit plusieurs m\u00e9thodes pour convertir des cha\u00eenes de caract\u00e8res en nombres. Voici comment vous pouvez utiliser <code>parseInt()<\/code> et <code>parseFloat()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let stringNumber = \"123.45\";\n\nlet integerNumber = parseInt(stringNumber);\n\nlet floatNumber = parseFloat(stringNumber);\n\nconsole.log(integerNumber);  \/\/ Sortie: 123\nconsole.log(floatNumber);    \/\/ Sortie: 123.45<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Convertir des Nombres en Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>La conversion inverse, c\u2019est-\u00e0-dire des nombres en cha\u00eenes de caract\u00e8res, est tout aussi importante. Vous pouvez utiliser la m\u00e9thode <code>toString()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let number = 456.78;\n\nlet stringNumber = number.toString();\n\nconsole.log(stringNumber);  \/\/ Sortie: \"456.78\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Convertir des Cha\u00eenes de Caract\u00e8res en Bool\u00e9ens<\/h3>\n\n\n\n<p>Parfois, il est n\u00e9cessaire de convertir des cha\u00eenes de caract\u00e8res en bool\u00e9ens. Pour ce faire, vous pouvez utiliser une simple comparaison :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let stringTrue = \"true\";\nlet stringFalse = \"false\";\n\nlet booleanTrue = (stringTrue === \"true\");\nlet booleanFalse = (stringFalse === \"false\");\n\nconsole.log(booleanTrue);   \/\/ Sortie: true\nconsole.log(booleanFalse);  \/\/ Sortie: true<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Convertir des Objets en JSON<\/h3>\n\n\n\n<p>Lorsque vous travaillez avec des API, vous devez souvent convertir des objets JavaScript en JSON. Utilisez <code>JSON.stringify()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let person = {\n    name: \"John\",\n    age: 30,\n    city: \"New York\"\n};\n\nlet jsonString = JSON.stringify(person);\n\nconsole.log(jsonString);  \/\/ Sortie: {\"name\":\"John\",\"age\":30,\"city\":\"New York\"}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Convertir des JSON en Objets<\/h3>\n\n\n\n<p>Pour la conversion inverse, c\u2019est-\u00e0-dire de JSON en objets, vous pouvez utiliser <code>JSON.parse()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let jsonString = '{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}';\n\nlet person = JSON.parse(jsonString);\n\nconsole.log(person.name);  \/\/ Sortie: John<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler des Dates en JavaScript<\/h3>\n\n\n\n<p>En JavaScript, les dates sont trait\u00e9es comme des objets. Il est possible de convertir des cha\u00eenes de caract\u00e8res repr\u00e9sentant des dates en objets de type <code>Date<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let dateString = \"2023-10-01T14:48:00.000Z\";\n\nlet date = new Date(dateString);\n\nconsole.log(date.toString());  \/\/ Sortie: Sun Oct 01 2023 16:48:00 GMT+0200 (Central European Summer Time)<\/code><\/pre>\n\n\n\n<p>La conversion inverse, de <code>Date<\/code> en cha\u00eene de caract\u00e8res, peut \u00eatre r\u00e9alis\u00e9e \u00e0 l&rsquo;aide de la m\u00e9thode <code>toISOString()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let date = new Date();\n\nlet dateString = date.toISOString();\n\nconsole.log(dateString);  \/\/ Sortie: 2023-10-01T14:48:00.000Z<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulation et Conversion des Structures Complexes<\/h3>\n\n\n\n<p>Manipuler des structures de donn\u00e9es imbriqu\u00e9es peut n\u00e9cessiter des conversions complexes. Convertir un objet contenant des tableaux et des objets imbriqu\u00e9s en cha\u00eene JSON et inversement est courant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let complexObject = {\n    user: \"Alice\",\n    activities: [\n        {name: \"Running\", duration: 30},\n        {name: \"Swimming\", duration: 45}\n    ]\n};\n\nlet jsonString = JSON.stringify(complexObject);\n\nconsole.log(jsonString);  \/\/ Sortie: {\"user\":\"Alice\",\"activities\":[{\"name\":\"Running\",\"duration\":30},{\"name\":\"Swimming\",\"duration\":45}]}\n\nlet parsedObject = JSON.parse(jsonString);\n\nconsole.log(parsedObject.activities[0].name);  \/\/ Sortie: Running<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion &#8211; Convertir Donn\u00e9es JavaScript<\/h2>\n\n\n\n<p>La conversion de donn\u00e9es en JavaScript est une n\u00e9cessit\u00e9 incontournable pour la mise en \u0153uvre efficace de fonctionnalit\u00e9s dans des applications web complexes. En comprenant et en utilisant les diff\u00e9rentes m\u00e9thodes de conversion pr\u00e9sent\u00e9es dans ce tutoriel, vous serez mieux \u00e9quip\u00e9 pour g\u00e9rer divers types de donn\u00e9es avec aisance. Continuez \u00e0 explorer et \u00e0 pratiquer ces techniques pour devenir plus \u00e0 l&rsquo;aise avec les subtilit\u00e9s et les nuances des conversions en JavaScript. Pour des cours plus approfondis, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">cours complet sur JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\n\n\n\n<h3 class=\"wp-block-heading\">Compl\u00e9ments sur la Conversion de Donn\u00e9es en JavaScript<\/h3>\n\n\n\n<p>Outre les m\u00e9thodes \u00e9voqu\u00e9es pour convertir des donn\u00e9es en JavaScript, il est \u00e9galement pertinent de comprendre comment g\u00e9rer d&rsquo;autres sc\u00e9narios courants dans les processus de d\u00e9veloppement d&rsquo;applications web. Par exemple, savoir <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-boite-de-dialogue-en-javascript\/\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;une bo\u00eete de dialogue en JavaScript<\/a> peut s&rsquo;av\u00e9rer utile lorsque vous travaillez sur l&rsquo;interface utilisateur.<\/p>\n\n\n\n<p>De plus, ma\u00eetriser la <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\/\" target=\"_blank\" rel=\"noopener\">utilisation du d\u00e9bogueur en JavaScript<\/a> est crucial pour r\u00e9soudre les probl\u00e8mes de conversion de donn\u00e9es et identifier les erreurs dans votre code. Des outils comme <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\/\" target=\"_blank\" rel=\"noopener\">VS Code<\/a> peuvent grandement faciliter ce processus gr\u00e2ce \u00e0 leurs puissantes fonctionnalit\u00e9s de d\u00e9bogage et d&rsquo;\u00e9dition.<\/p>\n\n\n\n<p>Il est \u00e9galement important de se familiariser avec les <a href=\"https:\/\/wikiform.fr\/codespace\/objets-set-map-weakset-weakmap-en-javascript\/\" target=\"_blank\" rel=\"noopener\">objets JavaScript<\/a> tels que Map, Set, WeakMap et WeakSet, qui offrent des options suppl\u00e9mentaires pour manipuler efficacement des donn\u00e9es complexes.<\/p>\n\n\n\n<p>Enfin, conna\u00eetre l&rsquo;importance de la <a href=\"https:\/\/wikiform.fr\/codespace\/portee-des-variables-en-javascript-explications\/\" target=\"_blank\" rel=\"noopener\">port\u00e9e des variables en JavaScript<\/a> et comprendre comment les objets et les tableaux peuvent interagir et s&rsquo;influencer mutuellement est crucial pour une gestion avanc\u00e9e des donn\u00e9es. Cette connaissance vous permettra d&rsquo;optimiser non seulement la conversion des donn\u00e9es mais aussi la structure globale de votre code.<\/p>\n\n\n\n<p>Pour explorer davantage les subtilit\u00e9s de JavaScript et renforcer vos comp\u00e9tences, n\u2019h\u00e9sitez pas \u00e0 consulter des ressources additionnelles et \u00e0 suivre des formations avanc\u00e9es. Par exemple, vous pouvez d\u00e9couvrir plus en d\u00e9tail comment <a href=\"https:\/\/wikiform.fr\/codespace\/declaration-let-const-var-javascript\/\" target=\"_blank\" rel=\"noopener\">d\u00e9clarer diverses variables en JavaScript<\/a> et comment elles peuvent \u00eatre utilis\u00e9es pour stocker des informations apr\u00e8s conversion.<\/p>\n\n\n\n<p>Pour plus de tutoriaux et d&rsquo;informations, n&rsquo;oubliez pas de visiter notre page de <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><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 Offre 50%\" style=\"width: 100%; max-width: 728px; height: auto; display: block; margin: auto;\" title=\"\"><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Convertir Donn\u00e9es JavaScript est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec ce langage. Ma\u00eetriser la conversion des donn\u00e9es permet d&rsquo;optimiser la gestion des informations&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","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\/5560","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=5560"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5560\/revisions"}],"predecessor-version":[{"id":5561,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5560\/revisions\/5561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2865"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}