how to add separator only when needed

[Mariusthvdb]

having a button-card with name as follows:

type: custom:button-card

variables:
  view: >
    [[[ return window.location.pathname.split('/')[2].replace('_',' '); ]]]
name: >
  [[[ function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      }
      var path = (states['input_boolean.toon_browser_path'].state === 'on')
        ? capitalizeFirstLetter(variables.view) : '';
      var tijd = (states['input_boolean.toon_tijd'].state === 'on')
        ? ' | ' + states['sensor.time'].state : '';
      var temp = (states['input_boolean.toon_temperatuur'].state === 'on')
        ? ' | ' + helpers.localize(states['sensor.ws_5500_outdoor_temperature']) : '';
      var dag = (states['input_boolean.toon_dag'].state === 'on')
        ? ' | ' + states['sensor.vandaag'].state : '';
      return `${path} ${tijd} ${dag} ${temp}`; ]]]

showing in full glory:

Ive hardcoded the | to be part of the individual var's but this make the | show up add the start of the line it path isnt selected:

what would be the best way to add the separator only when needed?

[RomRider]

Use Array.push to add each element of your string to an array and then use Array.join(' | ') at the end. It will do it for you.

[Mariusthvdb]

nice!

thanks for making me learn today

name: >
  [[[
      function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      }

      var parts = [];

      if (states['input_boolean.toon_browser_path'].state === 'on') {
        parts.push(capitalizeFirstLetter(variables.view));
      }

      if (states['input_boolean.toon_tijd'].state === 'on') {
        parts.push(states['sensor.time'].state);
      }

      if (states['input_boolean.toon_dag'].state === 'on') {
        parts.push(states['sensor.vandaag'].state);
      }

      if (states['input_boolean.toon_temperatuur'].state === 'on') {
        parts.push(
          helpers.localize(states['sensor.ws_5500_outdoor_temperature'])
        );
      }

      return parts.join(' | ');
  ]]]

might compress it a bit with vars like in my original, but this is very clear.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

[Mariusthvdb]

with vars, reads clearer to my eyes :

variables:
  view: >
    [[[ return window.location.pathname.split('/')[2].replace('_',' '); ]]]
name: >

  [[[
      function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      }

      var parts = [];

      var path = states['input_boolean.toon_browser_path'].state === 'on';
      var tijd = states['input_boolean.toon_tijd'].state === 'on';
      var dag = states['input_boolean.toon_dag'].state === 'on';
      var temp = states['input_boolean.toon_temperatuur'].state === 'on';

      if (path) {
        parts.push(capitalizeFirstLetter(variables.view));
      }

      if (tijd) {
        parts.push(states['sensor.time'].state);
      }

      if (dag) {
        parts.push(states['sensor.vandaag'].state);
      }

      if (temp) {
        parts.push(
          helpers.localize(states['sensor.ws_5500_outdoor_temperature'])
        );
      }

      return parts.join(' | ');
  ]]]