How to add a line break inside a javascript variable

Question

I am passing a javascript variable which contains the address and has multiple strings in one sentence. So while setting the variable, I want to break the sentence in 2 lines, ie streetNumber and streetName should be in first line and city and zipcode in second line. So I am trying to break the line using <br> tag like this:

let addr2  =  inputDataState.addressDetails.addrObj.street.streetNumber + ' '
             + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
             + inputDataState.addressDetails.addrObj.street.streetName+ ' ' + <br /> 
             + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
             + inputDataState.addressDetails.addrObj.street.city + ' ' 
             + inputDataState.addressDetails.addrObj.street.zipCode ;

But instead of a line break, I am getting [object Object] . So how do I add the line break to divide the variable in 2 lines?

Answer 1

insert "\\n" in your variable which you are using to print.

Example

let streetName ='Madhapur, Hyderabad \n India-500081';

console.log(streetName );

will print this like below

Madhapur, Hyderabad 
India-500081

Just add '\\n' where you want to break the line.

let addr2  =  inputDataState.addressDetails.addrObj.street.streetNumber + ''
             + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
             + inputDataState.addressDetails.addrObj.street.streetName+ '\n ' +  
             + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
             + inputDataState.addressDetails.addrObj.street.city + ' ' 
             + inputDataState.addressDetails.addrObj.street.zipCode ;

Answer 2

The first is the newline character ( \\n ). The newline character creates line breaks within the output of a string, be it simply text or JavaScript-generated HTML.

 inputDataState.addressDetails.addrObj.street.streetNumber + ' '
 + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
 + inputDataState.addressDetails.addrObj.street.streetName+ ' ' + '\n'
     + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
     + inputDataState.addressDetails.addrObj.street.city + ' ' 
     + inputDataState.addressDetails.addrObj.street.zipCode ;

Answer 3

Use another variable so you don't have to type so much and interpolate with Template Literals

 let inputDataState = { addressDetails: { addrObj: { street: { streetNumber: '123', streetPrefixCode: 'S.', streetName: 'Main', streetSuffixCode: 'St.', city: 'Springfield', zipCode: '95123' } } } }; const x = inputDataState.addressDetails.addrObj.street; let addr = `${x.streetNumber} ${x.streetPrefixCode} ${x.streetName} ${x.streetSuffixCode} ${x.city} ${x.zipCode}`; console.log(addr);

Answer 4

You should use Object_destructuring and Template_literals to solve your problem and make the code cleaner

const {
  streetNumber,
  streetPrefixCode , 
  streetName,
  streetSuffixCode, 
  city,
  zipCode
} = inputDataState.addressDetails.addrObj.street

let addr2 = `${streetNumber} ${streetPrefixCode} ${streetSuffixCode}
${streetSuffixCode} ${city}  ${zipCode}`

Test this

 console.log(`${6+2} is equal to ${2*4}`)