es6-template-literals-nested & es6-template-literals-condition & es6-template-literals (advanced skill / in deepth)

es6-nested-template-literals-condition.md

es6-template-literals (advanced skill / in deepth)

es6-template-literals-nested & es6-template-literals-condition

orderGift += `
    <div class="order-gift cut-line">
        <div class="title">
            <span class="gf-lf">赠豆</span>
            <span class="gf-rt">${parseFloat(dadouoff).toFixed(2)}</span>
        </div>
        ${
            totalReduceMoney
             ? 
             `
             <div class="title">
                <span class="gf-lf">满减</span>
                <span class="gf-rt">${parseFloat(totalReduceMoney).toFixed(2)}</span>
            </div>
            `
            : 
            ``
        } 
        <div class="money">
            <span class="gf-lf">订单金额</span>
            <span class="gf-rt">${parseFloat(sum).toFixed(2)}</span>
        </div>
    </div>
`;

MDN links

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

Demo

// 赠豆 
orderGift += `
    <div class="order-gift cut-line">
        <div class="title">
            <span class="gf-lf">赠豆</span>
            <span class="gf-rt">${parseFloat(dadouoff).toFixed(2)}</span>
        </div>
        ${
            totalReduceMoney
             ? 
             `
             <div class="title">
                <span class="gf-lf">满减</span>
                <span class="gf-rt">${parseFloat(totalReduceMoney).toFixed(2)}</span>
            </div>
            `
            : 
            ``
        } 
        <div class="money">
            <span class="gf-lf">订单金额</span>
            <span class="gf-rt">${parseFloat(sum).toFixed(2)}</span>
        </div>
    </div>
`;


printFoot = `
    <div class="bd-extra">
        <div class="total">
            <span>商品总金额：</span>
            <span class="tt-money"> ${total}</span>
            <span>-赠豆：${dadouoff}</span>
            ${
                totalReduceMoney ? `<span>-满减：${totalReduceMoney} </span> : ''`
            }
            <span>-赠豆：${dadouoff}</span>
            <span class="gift"></span>
        </div>
        <div class="payed">
            <span>支付金额：${sum}</span>
        </div>
    </div>
`;

格式：

OK

`
    ${
        var 
        ?
        ` ${var} `
        :
        ` ${var} `
    }
`

// OR

`
    ${
        ` ${var} `
        ?
        ` ${var} `
        :
        ` ${var} `
    }
`

error

${
    ${}
}

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Using_Web_Notifications

https://developer.mozilla.org/zh-CN/docs/Web/API/Notification/requestPermission

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

OK demo

Notification.requestPermission()
    .then(function(permission){
        console.log(permission);
        console.log(typeof(permission));
        // denied / granted
        if(permission === 'granted'){
            console.log(`permission has been got!`)
        }else if(permission === 'denied'){
            console.log(`permission hasn't been got!`)
        }else{
            console.log(`permission Error!`)
        }
        // Nested Template String
        return ` 
            ${
                permission === `granted`
                ? 
                `${console.log("permission has been got!")}`
                :
                `${console.log("permission hasn't been got!")}`
            }
        `;
    }
);



Notification.requestPermission()
    .then(function(permission){
        console.log(permission);
        console.log(typeof(permission));
        // denied / granted
        if(permission === 'granted'){
            console.log(`permission has been got!`)
        }else if(permission === 'denied'){
            console.log(`permission hasn't been got!`)
        }else{
            console.log(`permission Error!`)
        }
        // Nested Template String
        return ` 
            ${
                `${permission === `granted`}`
                ? 
                `${console.log("permission has been got!")}`
                :
                `${console.log("permission hasn't been got!")}`
            }
        `;
    }
);

error demo

Notification.requestPermission()
    .then(function(permission){
        console.log(permission);
        console.log(typeof(permission));
        // denied
        // granted
        if(permission === 'granted'){
            console.log(`permission has been got!`)
        }else if(permission === 'denied'){
            console.log(`permission hasn't been got!`)
        }else{
            console.log(`permission Error!`)
        }
        return ` 
            ${permission}
            ${ === } 
            "granted"
            ${ ? }
            ${console.log("permission has been got!")}
            ${ : }
            ${console.log("permission hasn't been got!")}
        `;
    }
);


Notification.requestPermission()
    .then(function(permission){
        console.log(permission);
        console.log(typeof(permission));
        // denied
        // granted
        if(permission === 'granted'){
            console.log(`permission has been got!`)
        }else if(permission === 'denied'){
            console.log(`permission hasn't been got!`)
        }else{
            console.log(`permission Error!`)
        }
        return ` 
            ${
                ${permission === "granted"} 
                ${ ? }
                ${console.log("permission has been got!")}
                ${ : }
                ${console.log("permission hasn't been got!")}
            }
        `;
    }
);

Web/API/Notification

https://gist.github.com/xgqfrms-GitHub/bab5cd08a4c85707ce10dd5e0a1057e1

api

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/onclick

https://developer.mozilla.org/zh-CN/docs/Web/API/notification#静态方法

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/onshow

https://developer.mozilla.org/zh-CN/docs/Web/API/notification/onerror

demo

https://developer.mozilla.org/zh-CN/docs/Web/API/Notification/icon

view-source:https://mdn.github.io/emogotchi/

https://mdn.github.io/emogotchi/main.js

https://github.com/mdn/emogotchi/blob/gh-pages/manifest.webapp

https://github.com/ufo-github/emogotchi

HTML5

Web Components

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

template

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template

grid-template

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template