Maison > interface Web > js tutoriel > Résumé de l'utilisation à haute fréquence des extensions de chaîne ES6

Résumé de l'utilisation à haute fréquence des extensions de chaîne ES6

PHP中文网
Libérer: 2017-06-19 17:28:42
original
1737 Les gens l'ont consulté

ES6 ajoute une interface de traversée pour les chaînes, afin que les chaînes puissent être parcourues par des boucles for...of.

for (let codePoint of 'foo') {

  console.log(codePoint)}

// "f"// "o"// "o"
Copier après la connexion

 

1.1 Exemple : Traverser un <🎜. >JSONdonnées

 function lettest()

        {

              var jsongs = {

                    "result": [

                        { "YDFLAG": "1", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "萝卜丝包", "YDRQ": "[2,1]", "PIC_ID": "12918", "SPDJ": "5", "YDBID": "12919", "NUM": "1", "SPJBXX_ID": "12913" },

                        { "YDFLAG": "2", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "肉包", "YDRQ": "[5]", "PIC_ID": "12911", "SPDJ": "5", "YDBID": "12912", "NUM": "2", "SPJBXX_ID": "12907" },

                        { "YDFLAG": "3", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "馒头", "YDRQ": "[4]", "PIC_ID": "12905", "SPDJ": "3", "YDBID": "12906", "NUM": "3", "SPJBXX_ID": "12900" },

                        { "YDFLAG": "4", "YXS": "0", "DPMC": "专属好评率", "MTYDL": "100", "SPFLMC": "蔬菜", "SPMC": "菜包", "YDRQ": "[2,3]", "PIC_ID": "12889", "SPDJ": "4", "YDBID": "12890", "NUM": "4", "SPJBXX_ID": "12884" }

                    ], "signToken": "/v1VqtzUE01JnOFJlHwnXu/IMKsjHL820hMdDHobFJPaE4R8D/VY3Q==", "allNum": "4"

                };

            for (var i of jsongs.result) {

              console.log(i.SPMC);

            }

        //商品名称:萝卜丝包,YDFLAG:1

// 商品名称:肉包,YDFLAG:2

// 商品名称:馒头,YDFLAG:3

// 商品名称:菜包,YDFLAG:4
Copier après la connexion
 

}

L'exemple ci-dessus est ce que nous utilisons souvent. Avant, nous utilisions des boucles comme for i++ pour obtenir des données, mais maintenant, nous pouvons utiliser directement for of . Pour réduire la charge de travail et améliorer l'efficacité du travail

1.2

includes(), StartsWith(), EndsWith().

Traditionnellement, JavaScript n'a que la méthode indexOf, qui peut être utilisée pour déterminer si une chaîne est contenue dans une autre chaîne. ES6 propose trois nouvelles méthodes.

  • includes() : renvoie une valeur booléenne indiquant si la chaîne de paramètre est trouvée.

  • startsWith() : renvoie une valeur booléenne indiquant si la chaîne de paramètre est en tête de la chaîne source.

  • endsWith() : renvoie une valeur booléenne indiquant si la chaîne de paramètre est à la fin de la chaîne source.

var s = &#39;Hello world!&#39;;

s.startsWith(&#39;Hello&#39;) // true

s.endsWith(&#39;!&#39;) // true

s.includes(&#39;o&#39;) // true
Copier après la connexion
 

Les trois méthodes prennent en charge un deuxième paramètre, indiquant la position pour démarrer la recherche.

var s = &#39;Hello world!&#39;;

s.startsWith(&#39;world&#39;, 6) // true

s.endsWith(&#39;Hello&#39;, 5) // true

s.includes(&#39;Hello&#39;, 6) // false
Copier après la connexion
 

Le code ci-dessus indique que lors de l'utilisation du deuxième paramètre n, endsWith se comporte différemment des deux autres méthodes. Elle cible les n premiers caractères, tandis que les deux autres méthodes ciblent la nème position jusqu'à la fin de la chaîne.

1.3.

padStart(), padEnd()

ES2017

ont introduit la fonction de chaînes pour compléter la longueur. Si une corde n'est pas assez longue, elle sera complétée au niveau de la tête ou de la queue. padStart() est utilisé pour la complétion de la tête et padEnd() est utilisé pour la complétion de la queue.

&#39;x&#39;.padStart(5, &#39;ab&#39;) 

// &#39;ababx&#39;

&#39;x&#39;.padStart(4, &#39;ab&#39;) // &#39;abax&#39;

&#39;x&#39;.padEnd(5, &#39;ab&#39;) // &#39;xabab&#39;

&#39;x&#39;.padEnd(4, &#39;ab&#39;) // &#39;xaba&#39;
Copier après la connexion
 

Une utilisation courante de

padStart

consiste à spécifier le nombre de chiffres pour la complétion numérique. Le code suivant génère une chaîne numérique de 10 chiffres.

&#39;1&#39;.padStart(10, &#39;0&#39;) 

// "0000000001"

&#39;12&#39;.padStart(10, &#39;0&#39;) // "0000000012"

&#39;123456&#39;.padStart(10, &#39;0&#39;) // "0000123456"

另一个用途
Copier après la connexion
 

est le format de chaîne d'invite.

&#39;12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-MM-12"

&#39;09-12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;) // "YYYY-09-12"
Copier après la connexion
 

1.4

Chaîne de modèle

Dans. le langage JavaScript traditionnel, le modèle de sortie est généralement écrit comme ceci.

$(&#39;#result&#39;).append(

  &#39;There are <b>&#39; + basket.count + &#39;</b> &#39; +

  &#39;items in your basket, &#39; +

  &#39;<em>&#39; + basket.onSale +

  &#39;</em> are on sale!&#39;);
Copier après la connexion

La méthode d'écriture ci-dessus est assez lourde et peu pratique ES6 introduit des chaînes de modèles pour résoudre ce problème. question problème.

function resulttemplate()

        {

            var basket = { "supplies": [{ "name": "张三" }, { "name": "李四" }, { "name": "lili" }] }

            var mess = `<table>`;

            for (var i = 0; i < basket.supplies.length; i++)

            {

                mess += `<tr><td> 姓名</td>

                    <td> ${basket.supplies[i].name}</td></tr>`;

            }

            mess += `</table>`;

            $(&#39;#result&#39;).append(mess);

var ddd=`<table>`;

for(let j of basket.supplies)

{

     ddd+=`<tr><td>${j.name}</td></tr>`;

}

ddd+=`</table>`;

console.log(ddd);

        }
Copier après la connexion
 

La chaîne modèle (chaîne modèle) est une version améliorée de la chaîne, Utilisez des backticks (`) pour identifier . Il peut être utilisé comme une chaîne ordinaire, ou il peut être utilisé pour définir des chaînes multilignes ou intégrer des variables dans des chaînes.

Tous les espaces et sauts de ligne dans la chaîne du modèle sont conservés. Si vous ne souhaitez pas ce saut de ligne, vous pouvez utiliser la méthode trim pour l'éliminer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal