Quelques fonctionnalités super utiles en JavaScript au cours des cinq dernières années !

La technologie est en constante évolution, JavaScript a beaucoup changé depuis sa création en 1995 et a depuis ajouté de nombreuses nouvelles fonctionnalités. Cet article traite de certaines des fonctionnalités très utiles (mais probablement moins connues) qui ont été ajoutées à JavaScript au cours des 5 dernières années ! Mais cela ne couvre pas toutes les fonctionnalités.

String.padStart() et String.padEnd()

Les deux méthodes de chaîne sont un moyen rapide et facile de compléter des chaînes avec d'autres chaînes. Comme son nom l'indique, String.padStart() ajoute une nouvelle chaîne au début de la chaîne donnée et String.padEnd() ajoute une chaîne au caractère donné à la fin. de la chaîne. String.padStart()将一个新字符串添加到给定字符串的开头，并将String.padEnd()一个字符串附加到给定字符串的末尾。

注意：这些方法不会改变原始字符串。

String.padStart(desiredStringLength, stringToAdd)

• desiredStringLength：你希望新字符串长度为数字的长度。【推荐学习：javascript视频教程】
• stringToAdd：这是要添加到原始字符串开头的字符串。

让我们看一个例子：

代码示例：

//最初的字符串
let originalString = 'Script';

//对原始的字符串添加字符串
let paddedString = originalString.padStart(10, 'Java');

console.log(paddedString);

// 输出 -->
// 'JavaScript'

如果“我们希望的新字符串长度”比“原始字符串的长度+要添加的字符串”短 。会发生什么情况呢？

在这种情况下，我们把将要添加到原始字符串开头的字符串多余的部分会被截掉。

例子：

let originalString = 'Script';

let paddedString = originalString.padStart(7, 'Java');

console.log(paddedString);

// 输出 -->
// 'JScript'
// 把将要添加到原始字符串开头的字符串从“Java”截断为“J”

如果我们希望的新字符串长度比“原始字符串的长度+要添加的字符串”长怎么办？

这可能会导致结果不符合我们的预期！它会把将要添加到原始字符串开头的字符串进行重复，直到它等于 我们希望的新字符串长度

代码示例：

let originalString = 'Script';

let paddedString = originalString.padStart( 15, 'Java');

console.log(paddedString);

// 输出 -->
// 'JavaJavaJScript'

如果没有提供 "将要添加到原始字符串开头的字符串" 参数呢？

它会在原始字符串的前面添加空格，直到字符串长度等于 我们希望的新字符串长度

代码示例：

let originalString = 'Script';

let paddedString = originalString.padStart(15);

console.log(paddedString);

// 输出 -->
// "         Script"

最后，没有提供 "我们希望的新字符串长度" 参数怎么办？

它会把原始字符串的副本被原封不动地返回：

代码示例：

let originalString = 'Script';

let paddedString = originalString.padStart('Java');

console.log(paddedString);

// 输出 --> 
// 'Script'

String.padEnd(desiredStringLength, stringToAppend)

• desiredStringLength：你希望新字符串长度为数字的长度。
• stringToAdd：这是要添加到原始字符串开头的字符串。

此字符串方法的工作方式与 String.padStart()相同，但将字符串附加到给定字符串的末尾。

代码示例：

let originalString = 'Web';

let paddedString = originalString.padEnd(6, 'Dev');

console.log(paddedString);

// 输出 -->
// 'WebDev

相同的规则适用于参数使用：

• desiredStringLength < 原始字符串 + stringToAppend？ 附加到原始字符串末尾的 stringToAppend 将被截断。
• desiredStringLength > 原始字符串 + stringToAppend？ 将重复追加到原始字符串末尾的 stringToAppend，直到达到 desiredStringLength。
• 没有传递 stringToAppend 参数？ 空格将附加到原始字符串，直到达到 desiredStringLength。
• 没有传递 desiredStringLength 参数？ 原始字符串的副本将原封不动地返回。

String.replaceAll（pattern，replacement）

• pattern：我们将要被替换的字符串
• replacement：我们希望替换成的字符串

你之前可能遇到过String.replace()，它接受一个pattern参数和一个replacement参数，并且替换字符串中匹配模式的第一个匹配项。pattern 参数可以是字符串也可以是RegEx。

String.replaceAll()

Remarque : Ces méthodes ne modifient pas la chaîne d'origine.

String.padStart(desiredStringLength, stringToAdd)

• desiredStringLength

   : Vous souhaitez que la nouvelle longueur de chaîne soit la longueur d'un nombre. [Apprentissage recommandé : tutoriel vidéo javascript]

  stringToAdd : Il s'agit de la chaîne à ajouter au début de la chaîne d'origine.

Regardons un exemple :

🎜Exemple de code : 🎜🎜

// 使用示例 String.replace() 
const aString = 'My name is z. z is my name.';

const replaceString = aString.replace('z', 'zayyo');

console.log(replaceString);

// 输出 -->
// "My name is zayyo. z is my name."
// 仅仅吧第一个“z”被替换为“zayyo”

// 使用示例 String.replaceAll() with regex
const  regex = /z/ig;

const anotherString = 'My name is z. z is my name.';

const replaceAllString = anotherString.replaceAll(regex, 'zayyo');

console.log(replaceAllString);

// 输出 -->
// ""My name is zayyo. zayyo is my name."."
// 把所有的z都替换成zayyo了

🎜Si « la longueur de la nouvelle chaîne que nous voulons » 🎜 est supérieure à 🎜 » la longueur de la chaîne d'origine + le chaîne à ajouter ”🎜short🎜. Ce qui se produit? 🎜

🎜Dans ce cas, on ajoute la chaîne qui sera ajoutée au début de la chaîne d'origine et la partie excédentaire sera 🎜tronquée🎜. 🎜

🎜🎜Exemple : 🎜🎜

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const fruitArray = Object.entries(fruitObject);

console.log(fruitArray);

// 输出 -->
// [["banana", "yellow"], ["strawberry", "red"], ["tangerine", "orange"]]

🎜Et si la longueur de la nouvelle chaîne que nous voulons est 🎜 plus longue que 🎜"la longueur de la chaîne d'origine + la chaîne à ajouter" 🎜 ? 🎜

🎜Cela peut entraîner des résultats qui ne correspondent pas à nos attentes ! Il 🎜répéter🎜 la chaîne qui sera ajoutée au début de la chaîne d'origine jusqu'à ce qu'elle 🎜égale🎜 la nouvelle longueur de chaîne souhaitée🎜

🎜 🎜Code Exemple : 🎜🎜

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const firstFruit = Object.entries(fruitObject)[0];

console.log(firstFruit);

// 输出 -->
// ['banana', 'yellow']

🎜Et si le paramètre "chaîne à ajouter au début de la chaîne d'origine" n'est pas fourni ? 🎜

🎜Il ajoutera des espaces 🎜 devant 🎜 de la chaîne originale jusqu'à ce que la longueur de la chaîne soit égale à la nouvelle longueur de chaîne souhaitée🎜

🎜 🎜Exemple de code : 🎜🎜

const string = 'Hello'

const stringAsArgument = Object.entries(string);

console.log(stringAsArgument);

// 输出 --> 
// [["0", "H"], ["1", "e"], ["2", "l"], ["3", "l"], ["4", "o"]]

🎜Enfin, que se passe-t-il si le paramètre "nouvelle longueur de chaîne que nous voulons" n'est pas fourni ? 🎜

🎜Il renverra une copie de la chaîne d'origine intacte : 🎜

🎜🎜Exemple de code : 🎜🎜

const array = [1,2,3]

const formattedArray = Object.entries(array);console.log(formattedArray);// 输出 --> 
// [["0", 1], ["1", 2], ["2", 3]]复制代码

🎜String .padEnd(desiredStringLength, stringToAppend)🎜

• 🎜desiredStringLength🎜 : Vous souhaitez que la nouvelle longueur de chaîne soit la longueur d'un nombre.
• 🎜stringToAdd🎜 : C'est la chaîne à ajouter au début de la chaîne d'origine.

🎜Cette méthode de chaîne fonctionne de la même manière que String.padStart() mais ajoute la chaîne à la fin de la chaîne donnée. 🎜🎜🎜Exemple de code : 🎜🎜

const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const langs = Object.keys(programmingLangs);

console.log(langs);

// 输出 -->
// ["JavaScript", "C", "Python"]

🎜Les mêmes règles s'appliquent pour l'utilisation des paramètres : 🎜

• 🎜desiredStringLength < 🎜 stringToAppend ajouté à la fin de la chaîne d'origine sera tronqué.
• 🎜desiredStringLength > chaîne d'origine + stringToAppend ? 🎜 StringToAppend s'ajoutera à plusieurs reprises à la fin de la chaîne d'origine jusqu'à ce que la longueur de chaîne souhaitée soit atteinte.
• 🎜Aucun paramètre stringToAppend passé ? 🎜 Des espaces seront ajoutés à la chaîne d'origine jusqu'à ce que la longueur de chaîne souhaitée soit atteinte.
• 🎜Le paramètre wantedStringLength n'est pas transmis ? 🎜 Une copie de la chaîne originale sera renvoyée inchangée.

🎜String.replaceAll(pattern, remplacement)🎜🎜

• 🎜pattern🎜 : la chaîne que nous remplacerons

li>

🎜replacement🎜 : la chaîne que nous voulons remplacer

🎜Vous avez peut-être rencontré String.replace () avant, qui accepte un paramètre de motif et un paramètre de remplacement et remplace la première occurrence du motif correspondant dans la chaîne. Le paramètre de modèle peut être String ou RegEx. 🎜🎜String.replaceAll() est plus puissant, comme son nom l'indique, il nous permet de remplacer toutes les occurrences d'un modèle spécifié par une chaîne de remplacement, pas seulement la première occurrence. 🎜🎜🎜Exemples de code : 🎜🎜

const string = 'Hallo';

const stringArray = Object.keys(string);

console.log(stringArray);

// 输出 -->
// ["0", "1", "2", "3", "4"]

🎜🎜Object.entries(), Object.keys(), Object.values() et Object.fromEntries()🎜🎜🎜Les méthodes ci-dessus sont utiles pour convertir certaines structures de données. . 🎜

Object.entries（originalObject）

此对象方法接收一个对象并返回一个新的二维数组，每个嵌套数组都包含原始对象的键和值作为元素。

代码示例：

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const fruitArray = Object.entries(fruitObject);

console.log(fruitArray);

// 输出 -->
// [["banana", "yellow"], ["strawberry", "red"], ["tangerine", "orange"]]

在转换我们的数据时，这是一种超级好用的方法。下面这个示例是访问对象中的特定键值对的用法：

代码示例：

const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const firstFruit = Object.entries(fruitObject)[0];

console.log(firstFruit);

// 输出 -->
// ['banana', 'yellow']

在JavaScript 中的很多东西都是对象的形式保存的。因此，我们还可以将数组和字符串作为参数传入给Object.entries()它们会强制把数组和字符串转换为对象。

代码示例：

const string = 'Hello'

const stringAsArgument = Object.entries(string);

console.log(stringAsArgument);

// 输出 --> 
// [["0", "H"], ["1", "e"], ["2", "l"], ["3", "l"], ["4", "o"]]

字符串中的每个字符都被插入到一个单独的数组中，并将其索引设置为数组的第一个元素。当您将数组作为参数传递时，也会发生一样的操作：

const array = [1,2,3]

const formattedArray = Object.entries(array);console.log(formattedArray);// 输出 --> 
// [["0", 1], ["1", 2], ["2", 3]]复制代码

注意： 对于这两种情况，第一个元素（索引）都是一个字符串。

Object.keys(anObject)

Object.keys方法接受一个对象作为参数，并且返回一个以对象的键作为元素的数组。

代码示例：

const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const langs = Object.keys(programmingLangs);

console.log(langs);

// 输出 -->
// ["JavaScript", "C", "Python"]

如果我们尝试传递一个字符串作为参数呢？会是什么结果呢？

代码示例：

const string = 'Hallo';

const stringArray = Object.keys(string);

console.log(stringArray);

// 输出 -->
// ["0", "1", "2", "3", "4"]

在这种情况下，字符串也会被强制转换为一个对象。每个字母代表值，它的索引代表键，所以我们返回的数组，就变成了包含字符串中每个字母的索引。

Object.values(anObject)

Object.values()方法的功能和我们刚刚学习的方法类似，但它不是返回数组中的对象键，而是返回数组中的对象值。

代码示例：

const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const creators = Object.values(programmingLangs);

console.log(creators);

// 输出 -->
// ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"]

Object.entries()和我们在之前学习Object.keys()一样，我们也可以传入其他数据类型，例如字符串。

代码示例：

const string = 'Bonjour'

const stringArray = Object.values(string);

console.log(stringArray) 

// 输出 -->
// ["B", "o", "n", "j", "o", "u", "r"]

Object.fromEntries（anIterable）

Object.fromEntries()与Object.entries()相反。它接受一个可迭代对象作为参数，例如数组或映射，并返回一个对象。让我们来看看：

代码示例：

const arrayTranslations = [
   ['french', 'bonjour'], 
   ['spanish', 'buenos dias'], 
   ['czech', 'dobry den']
];

const objectTranslations = Object.fromEntries(arrayTranslations);

console.log(objectTranslations);

// 输出 --> 
/*Object { french: "bonjour", spanish: "buenos dias", czech: "dobry den" }*/

因此，我们的可迭代对象（在示例中的嵌套数组）被迭代，并且每个子数组都转换为一个对象，其中索引 0 处的元素作为键，索引 1 处的元素作为值。

因为内容太多后续会继续补全，也欢迎大家在评论区补充..

更多编程相关知识，请访问：编程教学！！

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!