string – devfrontend.info

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

12/05/2022 / admin

Sources:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js

/**
 * @return {string}
 */
formatStreet: function (str) {
    return String(str).replace(/,(?=[^\s])/g, ", ");
},

/**

* @return {string}

formatStreet: function (str) {

return String(str).replace(/,(?=[^\s])/g, ", ");

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

<text args="formatStreet(address().street)"></text>

1	<text args="formatStreet(address().street)"></text>

Résultat en front:
Street 1,Street 2,Street 3

<each args="data: address().street, as: 'streetLine'">
    <text args="streetLine"></text>
    <br>
</each>

<br>

</each>

Résultat en front:
Street 1
Street 2
Street 3

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

11/01/2022 / admin

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

const priceTable = {
    "<=4": {
        "size": [
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" },
            { "100": "5.11", "250": "4.62",  "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60
            { "100": "5.88", "250": "4.88",  "500": "4.88", "1000": "3.88", "2000": "3.88" }
        ]
    }
}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères
const targetValue = Object.byString( priceTable, combinedPath );  // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

const priceTable = {

"<=4": {

"size": [

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" },

{ "100": "5.11", "250": "4.62", "500": "4.04", "1000": "3.81", "2000": "3.60" }, // <=4.size[4]['2000'] = 3.60

{ "100": "5.88", "250": "4.88", "500": "4.88", "1000": "3.88", "2000": "3.88" }

]

}

const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold; // PAS interprété comme une chaîne de caractères

const targetValue = Object.byString( priceTable, combinedPath ); // interprété comme une chaîne de caractères (<=4.size[4]['2000'])

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

21/12/2021 / admin

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');

1	Object.byString(someObj, 'part3[0].name');

[Javascript] Vérifier qu’une chaîne de caractères string contient une sous-chaîne substring spécifique avec les méthodes includes ou indexOf

07/08/2019 / admin

Source: en ES6 et pour Internet Explorer How to check whether a string contains a substring in JavaScript?

ES6

var string = "foo",
    substring = "oo";

console.log(string.includes(substring));

var string = "foo",

substring = "oo";

console.log(string.includes(substring));

ES5 ou plus ancien (Internet Explorer)

var string = "foo",
    substring = "oo";

console.log(string.indexOf(substring) !== -1);

var string = "foo",

substring = "oo";

console.log(string.indexOf(substring) !== -1);

Exemple in the field:

var BODY_CLASS = $('body').attr('class');

if ( (BODY_CLASS.indexOf('universe_catalog_checkout_cart') !== -1) !== true ) {
  // Si l'élément <body> n'a pas la class '.universe_catalog_checkout_cart', alors exécuter le code entre accolades.
}

var BODY_CLASS = $('body').attr('class');

if ( (BODY_CLASS.indexOf('universe_catalog_checkout_cart') !== -1) !== true ) {

// Si l'élément <body> n'a pas la class '.universe_catalog_checkout_cart', alors exécuter le code entre accolades.

}

[Javascript] Supprimer tous les caractères non numériques d’une chaîne avec la méthode Replace

05/07/2018 / admin

Source: Strip all non-numeric characters from string in JavaScript.

var myString = 'abc123.8<blah>';
//desired output is 1238

1 2	var myString = 'abc123.8<blah>'; //desired output is 1238

myString = myString.replace(/\D/g,'');

1	myString = myString.replace(/\D/g,'');

Attention: cette méthode renverra du texte. Le code myString + 1 renverra 12381.

Pour manipuler les valeurs numériques obtenues, il faut utiliser parseInt:

myString = parseInt(myString.replace(/\D/g,''));
myString + 1;
// 1239

myString = parseInt(myString.replace(/\D/g,''));

myString + 1;

// 1239

[LESS][Mixin] Concatener des chaînes de caractères

06/10/2015 / admin

Source : Concatenate strings in LESS.

Dans mon exemple, je charge différentes variations de la même police (MuseoSansRounded300,500,700 et 900) et je souhaite créer un mixin dont l’argument me permettra de choisir quelle variante je souhaite utiliser pour une classe CSS donnée.

.museo-variant(@weight){
  @filename-root: MuseoSansRounded;
  font-family: '@{filename-root}@{weight}';
  font-weight: normal;
}

.museo-variant(@weight){

@filename-root: MuseoSansRounded;

font-family: '@{filename-root}@{weight}';

font-weight: normal;

}

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Étiquette : string

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

[Javascript] Vérifier qu’une chaîne de caractères string contient une sous-chaîne substring spécifique avec les méthodes includes ou indexOf

ES6

ES5 ou plus ancien (Internet Explorer)

[Javascript] Supprimer tous les caractères non numériques d’une chaîne avec la méthode Replace

[LESS][Mixin] Concatener des chaînes de caractères

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

ES6

ES5 ou plus ancien (Internet Explorer)