Résumé de l'utilisation à haute fréquence des extensions de chaîne ES6-js tutoriel-php.cn

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

PHP中文网

Libérer： 2017-06-19 17:28:42

original

1728 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 &#39;foo&#39;) {

  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!