Подтвердить что ты не робот

Оберните длинную литеральную строку шаблона в многострочный, не создавая новую строку в строке

В шаблонах шаблонов es6, как можно обернуть длинный литерал шаблона в многострочный, не создавая новую строку в строке?

Например, если вы это сделаете:

const text = `a very long string that just continues
and continues and continues`

Затем он создаст новый строковый символ в строке, интерпретируя его, чтобы иметь новую строку. Как можно связать длинный шаблонный литерал с несколькими строками без создания новой строки?

4b9b3361

Ответ 1

Если вы введете продолжение строки (\) в точке новой строки в литерале, оно не создаст новую строку на выходе:

const text = `a very long string that just continues\
and continues and continues`;
console.log(text); // a very long string that just continuesand continues and continues

Ответ 2

Это старый. Но он подошел. Если вы оставите какие-либо пробелы в редакторе, они помещают их туда.

if
  const text = `a very long string that just continues\
  and continues and continues`;

просто выполните символ normal +

if
  const text = `a very long string that just continues` +
  `and continues and continues`;

Ответ 3

Вы можете просто съесть разрывы строк внутри литерала шаблона.

// Thanks to https://twitter.com/awbjs for introducing me to the idea
// here: https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation

const printLongLine = continues => {
    const text = 'a very long string that just ${continues}${''
                 } and ${continues} and ${continues}';
    return text;
}
console.log(printLongLine('continues'));

Ответ 4

РЕДАКТИРОВАТЬ: я сделал крошечный модуль NPM с этой утилитой. Он работает в Интернете и в Node, и я настоятельно рекомендую использовать его поверх кода, приведенного в ответе ниже, поскольку он гораздо более надежный. Он также позволяет сохранять новые строки в результате, если вы вручную вводите их как \n, и предоставляет функции для случаев, когда вы уже используете шаблонные литеральные теги для чего-то еще: https://github.com/iansan5653/compress-tag


Я знаю, что опаздываю, чтобы ответить здесь, но принятый ответ по-прежнему имеет недостаток, заключающийся в том, что после переноса строки не разрешается делать отступы, что означает, что вы все равно не можете написать очень красивый код, просто избегая перевода строки.

Вместо этого, почему бы не использовать теговую литеральную функцию шаблона?

function noWhiteSpace(strings, ...placeholders) {
  // Build the string as normal, combining all the strings and placeholders:
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/\s\s+/g, ' ');
  return withoutSpace;
}

Затем вы можете просто пометить любой шаблонный литерал, в котором вы хотите сделать разрыв строки:

let myString = noWhiteSpace'This is a really long string, that needs to wrap over
    several lines. With a normal template literal you can't do that, but you can 
    use a template literal tag to allow line breaks and indents.';

Это имеет недостаток, заключающийся в том, что возможно непредвиденное поведение, если будущий разработчик не привык к синтаксису тегированного шаблона или если вы не используете описательное имя функции, но на данный момент это самое чистое решение.

Ответ 5

Используйте старое и новое. Шаблонные литералы хороши, но если вы хотите избежать длинных литералов, чтобы иметь компактные строки кода, объедините их, и ESLint не вызовет суеты.

const text = 'a very long string that just continues'
  +' and continues and continues';
console.log(text);

Ответ 6

Решение, предложенное @CodingIntrigue, не работает для меня на node 7. Ну, это работает, если я не использую продолжение строки в первой строке, это не работает иначе.

Это, вероятно, не лучшее решение, но оно работает без проблем:

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();

Ответ 7

Подобно ответу Дуга, это принимается моей конфигурацией TSLint и остается неизменным моим автоформатером IntelliJ:

const text = 'a very long string that just ${
  continues
} and ${continues} and ${continues}'