Étiquette : string

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

23/06/2022 / admin

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

1	filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

1	filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

Avec Function et sans template literals

Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

1	Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

Inclus dans mon push push():

filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

1	filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

// WITHOUT PARAMETERS:
function runMe(){ console.log("runMe!"); }

// function we want to run
var fnstring = "runMe";

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn();

// results in:
// "runMe!"

// WITHOUT PARAMETERS:

function runMe(){ console.log("runMe!"); }

// function we want to run

var fnstring = "runMe";

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn();

// results in:

// "runMe!"

Fonction avec trois paramètres

// WITH PARAMETERS:
function runMeParams(one, two, three){ 
  console.log("runMe!" + one);
  console.log("runMe!" + two);
  console.log("runMe!" + three);
}

// function name and parameters to pass
var fnstring = "runMeParams";
var fnparams = [1, 2, 3];

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

// results in:
// "runMe!1"
// "runMe!2"
// "runMe!3"

// WITH PARAMETERS:

function runMeParams(one, two, three){

console.log("runMe!" + one);

console.log("runMe!" + two);

console.log("runMe!" + three);

}

// function name and parameters to pass

var fnstring = "runMeParams";

var fnparams = [1, 2, 3];

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn.apply(null, fnparams);

// results in:

// "runMe!1"

// "runMe!2"

// "runMe!3"

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

}

Articles récents

Catégories

Archives

Méta