Maison  >  Article  >  interface Web  >  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中文网
PHP中文网original
2017-06-19 17:28:421692parcourir

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"

 

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
 

}

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 = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true
 

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

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false
 

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.

'x'.padStart(5, 'ab') 

// 'ababx'

'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'
 

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.

'1'.padStart(10, '0') 

// "0000000001"

'12'.padStart(10, '0') // "0000000012"

'123456'.padStart(10, '0') // "0000123456"

另一个用途
 

est le format de chaîne d'invite.

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
 

1.4

Chaîne de modèle

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

$('#result').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;);

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);

        }
 

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!

Déclaration:
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
Article précédent:crack de tempête WebArticle suivant:crack de tempête Web